elementui源码学习之仿写一个el-tag

本篇文章记录仿写一个el-divider组件细节，从而有助于大家更好理解饿了么ui对应组件具体工作细节。本文是elementui源码学习仿写系列的又一篇文章，后续空闲了会不断更新并仿写其他组件。源码在github上，大家可以拉下来，npm start运行跑起来，结合注释有助于更好的理解。github仓库地址如下：https://github.com/shuirongsh...

组件需求分析

关于tag组件，主要是用于展示一些标签信息，一般的需求有如下：

• tag标签文字颜色自定义
• tag标签背景色自定义
• tag标签边框颜色自定义
• 控制是否展示关闭tag标签小叉号图标
• 自定义tag标签的文字颜色、背景色、边框颜色
• 标签的大小类型（大型、中型、小型标签）

饿了么官方使用的是render函数编写的el-tag，所以这里咱们也使用render函数去写。整体来说，这个组件还是比较简单的。注意一下jsx的语法即可。

组件效果图

看效果的话，直接复制粘贴运行跑起来，结合注释更有助于理解。最完整的代码在github上哦

使用之代码

封装组件的代码

总结

• 大家封装自己的组件的时候，最好借鉴其他UI组件库，比如这里仿写el-tag也是参照了antD的设计方式。
• 再一个就是仿写组件，不是把官方的组件全部照搬过来，而是适当取舍，保留比较常用的组件功能，暂时摒弃冷门组件功能，并加入自己公司常用的功能，以及自己的理解
• 如果有遇到冷门的组件功能，可以考虑再单独封装一个组件去解决
• 组件需要集成一些功能，但是不能集成非常多的功能，高内聚
• 本人水平有限，说的不一定对，仅供各位道友参考 ^_^