element-ui link 组件源码分享

link 组件的 api 涉及的内容不是很多，源码部分的内容也相对较简单，下面从以下这三个方面来讲解：

一、组件结构

1.1 组件结构如下图：

二、组件属性

2.1 组件主要有 type、underline、disabled、href、icon 这些属性，接下来我们对其属性进行一一揭秘。

2.1.1 type 属性，string 类型，可选值有 primary / success / warning / danger / info，默认 default

2.1.2 underline 属性，是否下划线，boolean 类型，默认 false，这个是鼠标放上的时候文字是否有下划线，如下图：

2.1.3 disabled 属性，是否禁用状态，boolean 类型，默认 false

2.1.4 href 属性，string 类型，原生 href 属性，无默认值，如下图：

2.1.5 icon 属性，图标类名，string 类型，无默认值，如下图：

代码如下：

<template>
  <el-row>
    <el-col>
      <el-link icon="el-icon-edit">icon在外</el-link>
    </el-col>
    <el-col>
      <el-link
        ><i class="el-icon-delete" style="color:red"></i>icon在内前</el-link
      >
    </el-col>
    <el-col>
      <el-link
        >icon在内后<i class="el-icon-delete" style="color:red"></i
      ></el-link>
    </el-col>
    <el-col>
      <el-link>
        <div slot="icon">
          slot当属性兼容性写法<i class="el-icon-edit" style="color:red"></i>
        </div>
      </el-link>
    </el-col>
  </el-row>
</template>

三、组件方法

3.1.1 组件内保留事件，如下图：