Link 文字链接

用于页面跳转、打开外部资源或触发与导航含义一致的轻量交互。

基础用法

语义类型

默认链接主要链接成功链接警告链接危险链接信息链接

下划线与状态

始终显示悬停显示不显示禁用链接

图标

打开外部页面 自定义图标插槽

<template>
  <div class="link-demo">
    <section>
      <h3>语义类型</h3>
      <div class="au-doc-row">
        <AuLink
          v-for="linkType in linkTypes"
          :key="linkType.type"
          :type="linkType.type"
          href="https://example.com"
          target="_blank"
          rel="noopener noreferrer"
        >
          {{ linkType.label }}
        </AuLink>
      </div>
    </section>
    <section>
      <h3>下划线与状态</h3>
      <div class="au-doc-row">
        <AuLink href="https://example.com" underline="always">始终显示</AuLink>
        <AuLink href="https://example.com" underline="hover">悬停显示</AuLink>
        <AuLink href="https://example.com" underline="never">不显示</AuLink>
        <AuLink href="https://example.com" disabled>禁用链接</AuLink>
      </div>
    </section>
    <section>
      <h3>图标</h3>
      <div class="au-doc-row">
        <AuLink
          type="primary"
          href="https://example.com"
          target="_blank"
          rel="noopener noreferrer"
          :icon="IconExternalLink"
        >
          打开外部页面
        </AuLink>
        <AuLink type="success" href="https://example.com">
          <template #icon><AuIcon :icon="IconCircleCheck" /></template>
          自定义图标插槽
        </AuLink>
      </div>
    </section>
  </div>
</template>
<script setup>
import { AuIcon, AuLink } from 'aurora-plus';
import { IconCircleCheck, IconExternalLink } from 'aurora-plus/icons';
const linkTypes = [
  { type: 'default', label: '默认链接' },
  { type: 'primary', label: '主要链接' },
  { type: 'success', label: '成功链接' },
  { type: 'warning', label: '警告链接' },
  { type: 'danger', label: '危险链接' },
  { type: 'info', label: '信息链接' },
];
</script>
<style scoped>
.link-demo {
  display: grid;
  gap: 18px;
}
.link-demo h3 {
  margin: 0 0 10px;
  color: var(--au-color-text-secondary);
  font-size: var(--au-font-size-small);
  font-weight: var(--au-font-weight-semibold);
}
</style>

Link API

Attributes

属性	说明	类型	可选值	默认值
type	语义类型	string	default / primary / success / warning / danger / info	default
underline	下划线显示策略	string	always / hover / never	hover
disabled	是否禁用	boolean	—	false
href	原生链接地址	string	—	''
target	原生链接目标	string	_self / _blank / _parent / _top 或其他合法目标	_self
icon	链接前置图标组件	Component	—	null

Events

事件名	说明	参数
click	链接可用时触发；禁用状态不会触发	(event: MouseEvent)

Slots

插槽名	说明
default	链接文字或其他行内内容
icon	覆盖 icon 属性对应的前置图标