2.14.0

文字链接 ​

文字超链接

安全警告

href 属性将直接渲染到 <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 '#'
  }
}

基础用法 ​

基础文字链接

禁用状态 ​

禁用状态

下划线 ​

控制下划线出现时机

警告

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 提供了一套图标，你可以在 icon 处找到。

API ​

属性 ​

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

插槽 ​

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

来源 ​

组件 • 样式 • 文档

贡献者 ​