elementUI-link简述链接按钮，大多数功能都在样式上，很简单。参数参数说明类型可选值默认值 ty

简述

链接按钮，大多数功能都在样式上，很简单。

参数

参数	说明	类型	可选值	默认值
type	类型	string	primary / success / warning / danger / info	default
underline	是否下划线	boolean	—	true
disabled	是否禁用状态	boolean	—	false
href	原生 href 属性	string	—	-
icon	图标类名	string	—	-

type、underline、disabled、href

type、underline、disabled都是对样式的控制
disabled控制是否可点击
href点击后跳转的链接

:class="[
  'el-link',
  type ? `el-link--${type}` : '',
  disabled && 'is-disabled',
  underline && !disabled && 'is-underline'
]"
:href="disabled ? null : href"

props: {
    type: {
      type: String,
      default: 'default'
    },
    underline: {
      type: Boolean,
      default: true
    },
    disabled: Boolean,
    href: String,
},

icon

传了icon参数，icon会出现在左侧
直接把icon作为slot也可以，任意设置位置

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

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

<template v-if="$slots.icon"><slot v-if="$slots.icon" name="icon"></slot></template>

props: {
    icon: String
},

click事件

设置click事件

@click="handleClick"
 
methods: {
    handleClick(event) {
          if (!this.disabled) {
                if (!this.href) {
                      this.$emit('click', event);
                }
          }
    }
}

全部源码（不含样式）

<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>
    </span>

    <template v-if="$slots.icon"><slot v-if="$slots.icon" name="icon"></slot></template>
  </a>
</template>

<script>

export default {
  name: 'ElLink',

  props: {
    type: {
      type: String,
      default: 'default'
    },
    underline: {
      type: Boolean,
      default: true
    },
    disabled: Boolean,
    href: String,
    icon: String
  },

  methods: {
    handleClick(event) {
      if (!this.disabled) {
        if (!this.href) {
          this.$emit('click', event);
        }
      }
    }
  }
};
</script>