Elementui源码学习模仿el-tag

/*默认标签样式*/.my-tag{显示：内联块；框大小：边框框；填充：08px；颜色：#252525；背景颜色：#fafafa；边框：1pxsolid#d9d9d9；边框半径：4px；字体大小：12px;white-space:nowrap;height:auto;line-height:20px;margin:08px8px0;}/*标签关闭小十字标记样式*/.close-tag{position:relative;margin-left:5px;cursor:pointer;display:inline-block;transform:translateY(-6%);}/*5种标签样式*/.primary{color:#409eff;border:1pxsolid#d9ecff;background-color:#ecf5ff;}.success{背景颜色：#f0f9eb；边框颜色：#e1f3d8；颜色：#67c23a；}.info{背景颜色：#f4f4f5；边框颜色：#e9e9eb；颜色：#909399；}.warning{background-color:#fdf6ec;border-color:#faecd8;color:#e6a23c;}.danger{background-color:#fef0f0;border-color:#fde2e2;color:#f56c6c;}/*默认小标签样式，A可用值有mediumlabel,large当然，标签中没有small，因为small是默认的*/.big{padding:4px10px;}.medium{padding:2px10px;}本文记录模仿el-divider组件的细节，帮助大家更好的了解饿了么UI对应组件的具体工作细节。本文是elementui源码学习模仿系列的另一篇文章，有空会持续更新模仿其他组件。源码在github上，大家可以拉下来，npmstart运行，结合注释帮助大家更好的理解。github仓库地址如下：https://github.com/shuirongsh...组件需求分析关于tag组件，主要用于显示一些标签信息。一般要求如下：tag标签文字颜色自定义tag标签背景色定义tag标签边框颜色自定义控制是否显示关闭tag标签小十字图标自定义tag标签的文字颜色、背景色、边框颜色thetag标签标签的大小和类型（大、中、小标签）你饿了吗？官方使用的是render函数写的el-tag，所以这里我们也使用render函数来写。总的来说，这个组件比较简单。注意jsx的语法。如果看组件效果图效果，可以直接复制粘贴运行。结合评论更有利于理解。最完整的代码在github上。代码使用封装组件代码/*默认标签样式*/.my-tag{显示：内联块；框大小：边框框；填充：08px；颜色：#252525；背景颜色：#fafafa；边框：1pxsolid#d9d9d9；边框半径：4px；字体大小：12px;white-space:nowrap;height:auto;line-height:20px;margin:08px8px0;}/*标签关闭小十字标记样式*/.close-tag{position:relative;margin-left:5px;cursor:pointer;display:inline-block;transform:translateY(-6%);}/*5种标签样式*/.primary{color:#409eff;border:1pxsolid#d9ecff;background-color:#ecf5ff;}.success{背景颜色：#f0f9eb；边框颜色：#e1f3d8；颜色：#67c23a；}.info{背景颜色：#f4f4f5；边框颜色：#e9e9eb；颜色：#909399；}.warning{background-color:#fdf6ec;border-color:#faecd8;color:#e6a23c;}.danger{background-color:#fef0f0;border-color:#fde2e2;color:#f56c6c;}/*默认小标签样式，A可用值有mediumlabel,large当然，标签中没有small，因为small是默认的*/.big{padding:4px10px;}.medium{padding:2px10px;}综上所述，当你封装自己的组件时，最好借鉴其他的UI组件库，比如这里模仿el-tag也参考了antD的设计方法。另一种是复制组件，不是把官方的组件全部复制过来，而是要适当的选择，保留比较常用的组件功能，暂时放弃不受欢迎的组件功能，加上你们公司常用的功能，自己的理解.对于冷门的组件功能，可以考虑单独封装一个组件，解决组件需要集成部分功能，但不能集成很多功能的问题。高内聚，本人水平有限，说的不一定对，仅供参考^_^