version:element-plus 1.0.1-beta.0
link
组件 相对比较简单
<template>
<a
:class="[
'el-link',
type ? `el-link--${type}` : '',
disabled && 'is-disabled',
underline && !disabled && 'is-underline'
]"
:href="disabled ? null : href"
@click="handleClick"
>
<!-- 传入 icon 才会渲染 也只支持element-ui自己的icon -->
<i v-if="icon" :class="icon"></i>
<!-- 默认插槽 -->
<span v-if="$slots.default" class="el-link--inner">
<slot></slot>
</span>
<!-- 自定义最后的具名插槽 icon -->
<!-- 但是我看官方示例直接在默认插槽里面用的 i 标签 -->
<slot v-if="$slots.icon" name="icon"></slot>
</a>
</template>
<script lang='ts'>
import { defineComponent, PropType } from 'vue'
type ILinkType = PropType<'primary' | 'success' | 'warning' | 'info' | 'danger' | 'default'>
export default defineComponent({
name: 'ElLink',
props: {
type: {
type: String as ILinkType,
default: 'default',
validator: (val: string) => {
return ['default', 'primary', 'success', 'warning', 'info', 'danger'].includes(val)
},
},
underline: {
type: Boolean,
default: true,
},
disabled: { type: Boolean, default: false },
href: { type: String, default: '' },
icon: { type: String, default: '' },
},
emits: ['click'],
setup(props, { emit }) {
function handleClick(event: Event) {
if (!props.disabled) {
emit('click', event)
}
}
return {
handleClick,
}
},
})
</script>