Link 链接

链接用于页面跳转或打开外部资源。VISTA B 直接使用 Element Plus 的 el-link，链接主色使用 colors.md 中的链接色 #13AEC5，功能链接沿用 VISTA B 功能色。

安全提示

href 会直接渲染到原生 <a> 标签上。传入用户可控地址时，需要先校验和净化 URL，避免 javascript: 这类恶意地址造成 XSS 或开放重定向风险。

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 "#"
  }
}

基础用法

用 type 设置链接类型。未设置 type 时为默认链接。

defaultprimarysuccesswarningdangerinfo

<el-link href="https://element-plus.org" target="_blank">default</el-link>
<el-link type="primary">primary</el-link>
<el-link type="success">success</el-link>
<el-link type="warning">warning</el-link>
<el-link type="danger">danger</el-link>
<el-link type="info">info</el-link>

颜色对应

类型	色值	使用场景
default	#334851	常规文字链接
primary	#13AEC5	主要链接、关键跳转
success	#18BB60	成功状态链接
warning	#FFAA00	警告状态链接
danger	#F06060	危险操作链接
info	#66767D	次要信息链接
disabled	#99A3A8	禁用链接

禁用状态

加上 disabled 后，链接不可点击，也不会渲染 href 和 target。

defaultprimarysuccesswarningdangerinfo

<el-link disabled>default</el-link>
<el-link type="primary" disabled>primary</el-link>
<el-link type="success" disabled>success</el-link>
<el-link type="warning" disabled>warning</el-link>
<el-link type="danger" disabled>danger</el-link>
<el-link type="info" disabled>info</el-link>

下划线

用 underline 控制下划线出现时机。Element Plus 2.9.9 起推荐使用 always、hover、never，默认值为 hover。

defaultalwayshovernever

<el-link>default</el-link>
<el-link underline="always">always</el-link>
<el-link underline="hover">hover</el-link>
<el-link underline="never">never</el-link>

图标链接

链接可以通过 icon 属性或默认插槽放入图标。图标通常放在文字前后，用于强调跳转、查看、编辑等操作含义。

EditCheckShare

<el-link icon="Edit">Edit</el-link>

<el-link>
  <span>Check</span>
  <el-icon class="el-icon--right"><View /></el-icon>
</el-link>

<el-link type="primary">
  <el-icon><Share /></el-icon>
  <span>Share</span>
</el-link>

API

Link 属性

属性	说明	类型	默认值
type	链接类型	primary / success / warning / danger / info / default	default
underline	下划线出现时机	always / hover / never / boolean	hover
disabled	是否禁用	boolean	false
href	原生 href 属性	string	空
target	原生 target 属性	_blank / _parent / _self / _top	_self
icon	图标组件	string / Component	空

Link 插槽

插槽	说明
default	链接内容
icon	自定义图标组件