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

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

组件思考

简而言之，el-link组件就是给a标签包了一层，加上一些样式。故link组件除了拥有a标签的功能，还需要有一些能够使用的样式效果。所以，我们仿写这个组件标签的时候主要是复习一下传参的变量和样式的搭配，从而实现我们需要的效果

组件的需求

• 给link组件加上不同类型的链接样式，比如普通样式、成功样式、警告样式、危险样式的链接样式
• 给link组件加上鼠标悬浮时下划线。封装组件中使用的是伪元素搭配border-bottom实现的
• 通过传参去控制link组件什么时候有下划线，什么时候没有下划线
• 另外，也需要考虑组件会被禁用，禁用时，不能点击，不能跳转，且更换一下样式效果
• 同时，link组件跳转链接时的一些操作
• 也要是考虑到link组件需要搭配小图标去使用（本例中以饿了么icon为例）

组件的效果图

组件实现分析

给link组件加上链接样式

这里使用动态class的数组用法去控制，如下简单例子：

// html


// js
props:{
    type: String, // 标签颜色的类型
}

// css
.primary { color: #2d8cf0; }
.success { color: #19be6b; }
.warning { color: #f90; }
.danger { color: #ed4014; }

由上，比如传递的type参数值为success，那么a标签就会加上一个success的类名，这样的话，就会找到对应css中的类名，从而呈现相应的颜色效果（当然type的值在底下css中要有对应的）

给link组件加上鼠标悬浮时下划线

其实类似这种，悬浮下划线，悬浮上划线，悬浮特殊背景控制。大致可以归纳为在主要dom旁边加上一个小东西，都可以考虑使用伪元素

关于啥是伪元素，这里不赘述

我们看下方的鼠标悬浮上划线和下划线的效果图，这个效果图就是使用伪元素搭配定位以及border去实现的

代码：

// css
span {
     font-size: 24px;
     position: relative;
}
span:hover::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 0;
    /* 定位控制 */
    top: 2px;
    border-top: 1px solid red;
}
span:hover::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 0;
    /* 定位控制 */
    bottom: -2px;
    border-bottom: 1px solid red;
}

// html
早上好，程序猿兽们

通过传参控制是否加上下划线（即：是否加上这个下划线类名）

这里依然是使用动态class的数组用法，在数组中书写四元表达式，简约代码如下：

大意：即不去隐藏下划线，又不去禁用这个link组件的时候，才加上underline类名，才产生下划线

使用v-bind="$attrs"兜底a标签的其他的未在props中声明的参数

我们知道a标签中有很多原生属性，如下图：

这么多a标签的属性，我们不可能在封装的组件的时候，如果把每一个属性都在props中声明，倒是有些麻烦。所以此时$attr就应运而生了。关于$attr和$listener的用法，这里也不赘述，大家只要记得$attr是做参数属性兜底的即可。详情可看笔者之前写的文章：https://segmentfault.com/a/11...

组件需求由于篇幅原因就不赘述了，详情见代码中注释（毕竟这个组件其实也挺简单的），接下来上代码

代码

演示的话，直接复制粘贴即可，结合注释更好理解。注意my-divider组件是之前封装的组件。

笔者封装的组件和官方封装的组件在一些细节的地方可能略有不同，算是多一个解法思路吧 ^o^

使用代码

封装组件代码