el-link源码解析

  <!-- 整体是一个a标签 点击后触发click事件-->
  <a
    :class="[
      'el-link',
      type ? `el-link--${type}` : '',
      disabled && 'is-disabled',
      // 如过underline为false，则不显示is-underline class，即没有下划线
      underline && !disabled && 'is-underline'
    ]"
    :href="disabled ? null : href"
    v-bind="$attrs"
    @click="handleClick"
  >
    <!-- icon-class  -->
    <i :class="icon" v-if="icon"></i>
    <!-- default slot -->
    <span v-if="$slots.default" class="el-link--inner">
      <slot></slot>
    </span>
    <!-- icon slot -->
    <template v-if="$slots.icon"><slot v-if="$slots.icon" name="icon"></slot></template>
  </a>
</template>

$typeMap: (
  primary: $--link-primary-font-color, 
  danger: $--link-danger-font-color, 
  success: $--link-success-font-color, 
  warning: $--link-warning-font-color, 
  info: $--link-info-font-color);

// 根据不同的type渲染出不同下划线颜色和字体颜色
@each $type, $primaryColor in $typeMap {
  &.el-link--#{$type} {
    color: $primaryColor;
    &:hover {
      color: mix($primaryColor, $--color-white, 80%)
    }
    &:after {
      border-color: $primaryColor
    }
    @include when(disabled) {
      color: mix($primaryColor, $--color-white, 50%)
    }
    @include when(underline) {
      &:hover:after {
        border-color: $primaryColor
      }
    }
  }
}