基本文本链接
使用 <el-link> 组件创建一个基本的文本链接：
<template>
<el-link>默认文本链接</el-link>
</template>
不同类型的文本链接
Element Plus 提供了不同类型的文本链接，包括默认、主要、成功、警告、危险等。你可以使用 type 属性指定文本链接的类型：
<template>
<div>
<el-link>默认文本链接</el-link>
<el-link type="primary">主要文本链接</el-link>
<el-link type="success">成功文本链接</el-link>
<el-link type="warning">警告文本链接</el-link>
<el-link type="danger">危险文本链接</el-link>
</div>
</template>
下划线
你可以使用 underline 属性来控制文本链接是否显示下划线：
<template>
<el-link>默认文本链接</el-link>
<el-link :underline="false">无下划线文本链接</el-link>
</template>
禁用文本链接
你可以通过设置 disabled 属性禁用文本链接：
<template>
<el-link>默认文本链接</el-link>
<el-link disabled>禁用文本链接</el-link>
</template>
文本链接图标
你可以在文本链接内添加图标，通过 icon 属性指定图标名称：
<template>
<el-link icon="el-icon-search">搜索</el-link>
<el-link type="primary" icon="el-icon-edit">编辑</el-link>
</template>
下拉菜单
<el-link> 组件还支持作为下拉菜单的触发器，通过 dropdown 属性来定义下拉内容：
<template>
<el-link :underline="false" :dropdown="dropdownOptions">下拉菜单</el-link>
</template>
<script>
export default {
data() {
return {
dropdownOptions: [
{ text: '选项一', value: 'option1' },
{ text: '选项二', value: 'option2' },
{ text: '选项三', value: 'option3' },
]
};
}
};
</script>
在上述例子中，通过 dropdown 属性传入下拉菜单的选项数组。
以上是 Element Plus 中关于文本链接的基本使用示例。你可以根据项目需求，使用不同的配置选项来满足设计和交互的要求。详细的文本链接配置选项可以在 Element Plus 的[官方文档](https://element-plus.org/#/en-US/component/link)中找到。
转载请注明出处：http://www.zyzy.cn/article/detail/5524/ElementPlus