<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>
element源码之el-link
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- 最近在看element-ui的源码，边学习的同时也在简书上做一个笔记。 首先，看一下el-button的源码 以上...
- 前几天美化博客时发现滚动条在window下实在太难看，所以在基于vue的技术上寻找美化滚动条的方法。记得Eleme...
- vue3+ts+element 从新封装el-link 修改默认参数 以及跳转路由使用vueRouter跳...
- vue+element ui 表格+el-link跳转页面 效果展示： 实现过程： 通过template的slot...
- 单独验证某个表单this.$refs.changeForm.validateField('newPhone')ch...
