2.11.1

Link 链接 ​

文字超链接

安全警告

href 属性会直接渲染到 <a> 标签上。如果你传入一个类似 javascript:alert(1) 的值或者一个恶意链接，可能会导致 XSS 或者 开放重定向漏洞。

在使用前请务必对 URL 进行验证和清理。例如

显示代码示例
js
function sanitizeUrl(url) {
  const allowedProtocols = ['http:', 'https:']
  try {
    const parsed = new URL(url, window.location.origin)
    return allowedProtocols.includes(parsed.protocol) ? parsed.href : '#'
  } catch {
    return '#'
  }
}

基础用法 ​

基础文字链接

禁用状态 ​

链接禁用状态

下划线 ​

控制下划线出现时机

警告

boolean 类型的值已被 废弃，并将在 3.0.0 版本中 移除，请考虑切换到新的值。

提示

从 2.9.9 版本开始，您可以使用 'always' | 'hover' | 'never' 来控制下划线何时出现。文档中的示例均使用这些值。如果您使用的版本 低于 2.9.9，请参考

vue
<template>
  <!-- works before 2.9.9, use 'hover' after, removed in 3.0.0 -->
  <el-link underline>link</el-link>
  <!-- works before 2.9.9, use 'never' after, removed in 3.0.0 -->
  <el-link :underline="false">link</el-link>
</template>

图标 ​

带图标的链接

提示

使用 icon 属性添加图标。您可以传递组件名称的字符串（需预先注册）或组件本身（一个 SVG Vue 组件）。Element Plus 提供了一套图标，您可以在图标中找到。

API ​

属性 ​

名称描述类型默认值
typetype枚举default
是否下划线何时应出现下划线枚举悬浮时
disabled是否禁用booleanfalse
原生 href 属性同原生超链接的 hrefstring—
target同原生超链接的 target枚举_self
icon图标组件string / Component—

插槽 ​

名称描述
default自定义默认内容
icon自定义图标组件

来源 ​

组件 • 样式 • 文档

贡献者 ​