Elementui源码学习模仿一个el-link

//默认style.myLink{display:inline-block;游标：指针；字体大小：14px；字体粗细：500；颜色：#666；//默认颜色，当然你也可以使用type类型配色text-decoration:none;//去除默认a标签下划线（不要使用内置下划线效果）position:relative;//定位匹配伪元素实现浮动下划线效果margin:4px;.aContent{显示：flex;对齐项目：居中；}//当传递一个图标的时候，给第一个元素加上右边距，产生间距。spaceC>:first-child{margin-right:4px;}//控制flexbox的方向，控制图标在后面位置（默认前面位置）.back{flex-direction:row-reverse;}//注意这里要覆盖上面spaceC的样式。返回>:first-child{边距:0004px;}}//通过变量控制是否有这个下划线类名，从而控制是否有下划线。underline:hover::after{//这样的话，元素在哪，下划线就在content:"";位置：绝对；左：0；右：0；高度：0；底部：-2px；//注意这里如果不设置颜色，会沿用参考定位元素的颜色border-bottom:1pxsolid;}//下面的颜色是从iview.primarycopy过来的{color:#2d8cf0;}.success{颜色：#19be6b;}.warning{color:#f90;}.danger{color:#ed4014;}//通过透明度模拟disabled颜色样式效果，不然要写两个colors有点麻烦.toDisabled{opacity:0.36;光标：不允许；本文记录了模仿一个el-link组件的细节，有助于大家更好的理解饿了么UI对应组件的具体工作细节。本文是elementui源码学习模仿系列的另一篇文章，有空会持续更新模仿其他组件。源码在github上，大家可以拉下来，npmstart运行，结合注释帮助大家更好的理解。github仓库地址如下：https://github.com/shuirongsh...组件思路简单来说，el-link组件将a标签包裹起来，带有一些样式。因此，link组件除了a标签的作用外，还需要有一些可用的样式效果。所以，我们在仿制这个组件标签的时候，主要是审查传递参数的变量和样式的搭配，从而实现我们需要的效果组件的需求。为链接组件添加不同类型的链接样式，如正常样式、成功样式、警告样式和危险样式链接样式，在鼠标悬停时为链接组件添加下划线。封装组件使用带有border-bottom的伪元素，通过传递参数来控制链接组件什么时候加下划线，什么时候不加下划线。此外，还需要考虑组件将被禁用。当禁用时，它不能被点击或跳跃。并改变风格和效果。同时，链接组件跳转到链接时的一些操作也要考虑到链接组件需要配合小图标使用（本例以饿了么图标为例）。组件的效果图组件针对链接组件进行分析另外，这里使用动态类数组的用法来控制链接样式，举个简单的例子：//html//jsprops:{type:String,//标签颜色类型}//css.primary{color:#2d8cf0;}.success{颜色：#19be6b;}.warning{颜色：#f90;}.danger{颜色：#ed4014；}由上可知，如传入的type参数值为success，则a标签会添加一个success的类名，这样就会在对应的css中找到该类名，从而呈现出对应的颜色效果（当然type的值必须在底层css中有对应的值）tolink组件加上鼠标悬停时的下划线其实和这个类似，浮动下划线，浮动上划线，浮动特殊背景控件。大致可以概括为在主dom旁边加一个小东西。您可以考虑使用伪元素。关于什么是伪元素，这里就不细说了。实现元素匹配定位和边框的代码：//cssspan{font-size:24px;位置：相对；}span：hover::before{内容：“”；位置：绝对；左：0；右：0；高度：0；/*定位控件*/top:2px;border-top:1pxsolidred;}span:hover::after{content:"";位置：绝对；左：0；右：0；高度：0；/*定位控件*/bottom:-2px;border-bottom:1pxsolidred;}//html早安，程序员通过传参控制是否加下划线（即：是否加下划线的类名）这里还是使用数组的用法动态类的，在数组中写四元表达式，简化代码如下：达到效果:下划线不隐藏且链接组件未禁用时，添加下划线类名生成下划线。props中声明的参数我们知道a标签中有很多原生属性，如下图所示：一个标签，我们不可能在封装组件的时候，如果在props中声明了每一个属性，有点麻烦，这时候$attr就应运而生了。关于$attr和$listener的用法，这里就不赘述了，大家只要记得$attr是作为参数属性的就可以了。具体可以参考作者写的文章：https://segmentfault.com/a/11...由于篇幅原因，组件要求不再详述。详情看代码中的注释（毕竟这个组件其实还是挺简单的），那么如果你归结为代码演示，直接复制粘贴即可，结合注释更能理解。注意my-divider组件是之前封装好的组件。作者封装的组件可能在一些细节上和官方封装的组件略有不同，所以多了一个解决思路^o^使用代码封装组件代码//默认style.myLink{display:inline-block;游标：指针；字体大小：14px；字体粗细：500；颜色：#666；//默认颜色，当然你也可以使用type类型配色text-decoration:none;//去除默认a标签下划线（不要使用内置下划线效果）position:relative;//定位匹配伪元素实现浮动下划线效果margin:4px;.aContent{显示：flex;对齐项目：居中；}//当传递一个图标的时候，给第一个元素加上右边距，产生间距。spaceC>:first-child{margin-right:4px;}//控制flexbox的方向，控制图标在后面位置（默认前面位置）.back{flex-direction:row-reverse;}//注意这里要覆盖上面spaceC的样式。返回>:first-child{边距:0004px;}}//通过变量控制是否有这个下划线类名，从而控制是否有下划线。underline:hover::after{//这样的话，元素在哪，下划线就在content:"";位置：绝对；左：0；右：0；高度：0；底部：-2px；//注意这里如果不设置颜色，会沿用参考定位元素的颜色border-bottom:1pxsolid;}//下面的颜色是从iview.primarycopy过来的{color:#2d8cf0;}.success{颜色：#19be6b;}.warning{color:#f90;}.danger{color:#ed4014;}//通过透明度模拟disabled颜色样式效果，不然要写两个colors有点麻烦.toDisabled{opacity:0.36;光标：不允许；