Link 链接

文字超链接

安全警告

href 属性会直接渲染到 <a> 标签上。如果你传递了诸如 javascript:alert(1) 或恶意 URL 之类的值，可能会导致 XSS 或 开放式重定向漏洞。

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

显示代码示例

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

属性

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