文字链接（Link）

Element-UI 的文字链接组件提供了丰富的样式和功能，可以用于网页中的超链接或交互性文本。通过简单的属性配置，可以实现不同的视觉效果和交互行为。

提示

文字链接（Link）官方文档：https://element.eleme.cn/#/zh-CN/component/link (opens new window)

1. 基本使用

在 Vue 组件中使用 <el-link> 标签即可创建一个文字链接。可以通过属性来定制链接的外观和行为。

基本语法

<template>
  <el-link href="https://www.example.com" target="_blank">默认链接</el-link>
</template>

2. 文字链接属性

Element-UI 文字链接组件支持多种属性，用于控制链接的样式和行为。

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

1. 类型 (type)：

   • primary：主要链接，蓝色，强调主要操作。
   • success：成功链接，绿色，表示成功操作。
   • warning：警告链接，黄色，提示注意。
   • danger：危险链接，红色，提示风险。
   • info：信息链接，浅蓝色，提供信息提示。
   • default：默认链接，无特定样式，通常为灰色。

2. 下划线 (underline)：

   • 默认情况下，链接带有下划线。
   • 设置 underline 属性为 false 可去除下划线。

3. 禁用状态 (disabled)：

   • 设置 disabled 属性为 true 时，链接呈现禁用状态，不可点击。

4. 原生 href 属性 (href)：

   • 使用 href 属性为链接设置目标地址，支持所有原生超链接的属性。

5. 图标 (icon)：

   • 使用 icon 属性可以在链接中添加图标，通过设置图标类名实现。

3. 常见文字链接示例

默认文字链接

默认文字链接具有默认样式，通常为灰色，并带有下划线。

<template>
  <el-link href="https://www.example.com" target="_blank">默认链接</el-link>
</template>

主要文字链接

主要文字链接用于强调关键操作，颜色为蓝色，通过 type="primary" 设置。

<template>
  <el-link type="primary">主要链接</el-link>
</template>

成功文字链接

成功文字链接用于表示成功的操作，颜色为绿色，通过 type="success" 设置。

<template>
  <el-link type="success">成功链接</el-link>
</template>

警告文字链接

警告文字链接用于提示用户注意，颜色为黄色，通过 type="warning" 设置。

<template>
  <el-link type="warning">警告链接</el-link>
</template>

危险文字链接

危险文字链接用于提示用户注意风险，颜色为红色，通过 type="danger" 设置。

<template>
  <el-link type="danger">危险链接</el-link>
</template>

信息文字链接

信息文字链接用于提示用户一般信息，颜色为浅蓝色，通过 type="info" 设置。

<template>
  <el-link type="info">信息链接</el-link>
</template>

4. 特殊样式文字链接

无下划线文字链接

无下划线的文字链接用于减少视觉干扰，使用 underline=false。

<template>
  <el-link :underline="false">无下划线链接</el-link>
</template>

禁用文字链接

禁用文字链接用于显示当前不可用的链接，使用 disabled。

<template>
  <el-link disabled>禁用链接</el-link>
</template>

带图标文字链接

带图标的文字链接用于增加视觉提示，使用 icon 属性。

<template>
  <el-link icon="el-icon-edit">编辑链接</el-link>
</template>

5. 自定义文字链接样式

如果需要自定义文字链接的颜色或样式，可以通过 CSS 覆盖默认样式：

<template>
  <el-link class="custom-link">自定义链接</el-link>
</template>

<style scoped>
.custom-link {
  color: #ff6600;
  font-weight: bold;
}

.custom-link:hover {
  color: #cc5200;
  text-decoration: underline;
}
</style>

总结

• 链接类型丰富：Element-UI 提供多种链接类型，通过设置 type 属性来实现不同的颜色和功能。
• 灵活的属性组合：通过 underline、disabled、icon 等属性，可以轻松实现各种链接效果。
• 自定义设计：支持通过 CSS 覆盖默认样式，实现个性化设计。