Link 链接

文字超链接

注意

安全警告 href prop 将会直接渲染到 <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 '#'
  }
}

import { createApp } from 'vue'
import { ElLink } from '@szhn/dh-design-pc'

const app = createApp()
app.use(ElLink)

基础用法

基础的文字链接用法。

禁用状态

文字链接不可用状态。

下划线

控制下划线是否出现

注意

WARNING 属性 boolean 值将在

版本中被移除，请考虑切换至新的 API。

提示

TIP 从

开始，你可以使用 'always' | 'hover' | 'never' 来控制是否显示下划线。文档中的示例将都使用这些值。如果您使用的版本低于

，请参考：

图标

带图标的链接

提示

TIP 使用 icon 属性来为按钮添加图标。您可以传递组件名称的字符串（提前注册）或组件本身是一个 SVG Vue 组件。 dh-design-pc 提供了一套图标，您可以在 icon 找到它们。

Link API

Attributes

属性名	说明	类型	默认值
type	类型	enum	default
underline	控制下划线是否出现	enum	never
disabled	是否禁用状态	boolean	false
href	原生 href 属性	string	—
target	同原生 `target` 属性	enum	_self
icon	图标组件	string / Component	—

Slots

插槽名	说明
default	自定义默认内容
icon	自定义图标组件

Link 链接 ​

基础用法 ​

禁用状态 ​

下划线 ​

图标 ​

Link API ​

Attributes ​

Slots ​