element源码之el-link

<template>
  <a
    :class="[
      'el-link',
      type ? `el-link--${type}` : '',
      disabled && 'is-disabled',
      underline && !disabled && 'is-underline'
    ]"
    :href="disabled ? null : href"
    v-bind="$attrs"
    @click="handleClick"
  >

    <i :class="icon" v-if="icon"></i>

    <span v-if="$slots.default" class="el-link--inner">
      <slot></slot>
      <!-- default slot -->
    </span>

    <template v-if="$slots.icon"><slot v-if="$slots.icon" name="icon"></slot></template>
    <!-- icon slot，一般用不上 -->
  </a>
</template>

<script>

export default {
  name: 'ElLink',

  props: {
    type: {   // css
      type: String,
      default: 'default'
    },
    underline: {   // class (细节,disabled的情况下也不显示下划线)
      type: Boolean,
      default: true
    },
    disabled: Boolean,   // css
    href: String,  // 原生 href 属性（ disabled 为false时才设置该属性）
    icon: String  // class
  },

  methods: {
    // 不禁用且herf不为null情况下触发该事件
    handleClick(event) {
      if (!this.disabled) {
        if (!this.href) {
          this.$emit('click', event);
        }
      }
    }
  }
};
</script>