2.11.1

Link 链接 ​

文字超链接

安全警告

href prop 会被直接渲染为 <a> 标签。 如果您传入 javascript:alert(1) 之类的值或恶意 URL，可能会导致 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 '#'
  }
}

基础用法 ​

基础的文字链接

禁用状态 ​

链接的禁用状态

下划线 ​

控制下划线出现时机

警告

布尔值 的用法已经 被废弃，并 将会在 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 属性同原生超链接的 `href` 属性string—
target同原生超链接的 `target` 属性枚举_self
icon图标组件string / Component—

插槽 ​

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

来源 ​

组件 • 样式 • 文档

贡献者 ​