Link 链接

文字链接

基础文字链接

最简单的文字链接形式,点击后直接跳转到对应链接。

下划线文字链接

在文字下加横线,表明此处为链接。

带图标的文字链接

文字链接与图标搭配使用,通过图标快速了解链接所代表的含义。

链接悬浮态样式的链接

悬浮状态包含 2 种状态:文本颜色变化 和 添加下划线。由 hover 控制,可选值:color | underline

提示不同状态的链接

default、primary、success、warning、danger不同状态下,可提供对应的链接主题色。

禁用的链接

当链接不可用时,显示禁用状态。

不同尺寸的链接

提供大、中(默认)、小三种尺寸。

名称类型默认值说明必传
contentString / Slot / Function-链接内容。TS 类型:string | TNode通用类型定义N
defaultString / Slot / Function-链接内容,同 content。TS 类型:string | TNode通用类型定义N
disabledBoolean-禁用链接N
downloadString / Boolean-使得浏览器将链接的 URL 视为可下载资源N
hoverStringunderline链接悬浮态样式,有 文本颜色变化、添加下划线等 2 种方法。可选项:color/underlineN
hrefString-跳转链接N
prefixIconSlot / Function-前置图标。TS 类型:TNode通用类型定义N
sizeStringmedium尺寸。可选项:small/medium/large。TS 类型:SizeEnum通用类型定义N
suffixIconSlot / Function-后置图标。TS 类型:TNode通用类型定义N
targetString-跳转方式,如:当前页面打开、新页面打开等,同 HTML 属性 target 含义相同N
themeStringdefault组件风格,依次为默认色、品牌色、危险色、警告色、成功色。可选项:default/primary/danger/warning/successN
underlineBoolean-普通状态是否显示链接下划线N
onClickFunctionTS 类型:(e: MouseEvent) => void
点击事件,禁用状态不会触发点击事件
N
名称参数描述
click(e: MouseEvent)点击事件,禁用状态不会触发点击事件

何时使用

跳转到系统内其他页面或者打开外部站点;

某个功能操作的触发;

外部资源的引用,方便用户直接访问原始出处。

建议/慎用示例

链接的文本内容应准确反映链接指向的内容,避免使用模糊或误导性的文字,让用户在点击前就能大致了解目标页面的主题。


页面上的链接数量要适度,避免过度堆砌,以免造成页面混乱,影响用户对重要信息的获取和操作。

相似组件

组件名何时使用
Button 按钮按钮用于开启一个闭环的操作任务,如“删除”对象、“购买”商品等。
  • default
  • primary
  • danger
  • warning
  • success
  • underline
  • color
  • small
  • medium
  • large