Link 文字链接

用于页面跳转、打开外部资源或触发与导航含义一致的轻量交互。组件保持原生 <a> 语义，不使用按钮表面。

基础用法

类型、下划线、禁用与图标

默认在悬停时显示下划线；语义类型只改变文字颜色，不增加背景、边框或按钮内边距。

语义类型

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

下划线与状态

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

图标

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

vue

<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, IconCircleCheck, IconExternalLink } from 'aurora-plus';
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>

使用建议

• 页面跳转或打开资源使用 AuLink，提交、确认等操作使用 AuButton。
• target="_blank" 时同时传入 rel="noopener noreferrer"。
• href 会直接透传给原生 <a>；对于不可信输入，业务侧必须校验协议和目标地址。
• 禁用状态不会渲染 href 和 target，也不会触发组件的 click 事件。

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

未被组件声明的属性（例如 rel、download、hreflang、aria-label）会透传到原生 <a>。

Events

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

Slots

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