X-Next

Appearance

Link 链接 ​

用于页面跳转或轻量动作，适合在正文、列表和操作区中承载低重量入口。

何时使用 ​

  • 在正文、详情页或表格操作区放置低强调的跳转入口。
  • 用状态色表达成功、警告、危险等轻量动作。
  • 需要在链接前展示默认图标、业务图标或加载反馈。

基础用法 ​

文本链接强调链接禁用链接
vue
<template>
  <x-link href="https://example.com">文本链接</x-link>
  <x-link href="https://example.com/docs" strong>强调链接</x-link>
  <x-link disabled>禁用链接</x-link>
</template>

链接状态 ​

普通链接成功链接警告链接危险链接
vue
<template>
  <x-link href="https://example.com">普通链接</x-link>
  <x-link status="success" href="https://example.com">成功链接</x-link>
  <x-link status="warning" href="https://example.com">警告链接</x-link>
  <x-link status="danger" href="https://example.com">危险链接</x-link>
</template>

悬浮底色 ​

默认悬浮底色无悬浮底色危险无底色
vue
<template>
  <x-link href="https://example.com">默认悬浮底色</x-link>
  <x-link href="https://example.com" :hoverable="false">无悬浮底色</x-link>
  <x-link status="danger" href="https://example.com" :hoverable="false">危险无底色</x-link>
</template>

图标与插槽 ​

默认图标 自定义图标
禁用图标
vue
<template>
  <x-link icon href="https://example.com">默认图标</x-link>
  <x-link href="https://example.com">
    <template #icon>
      <span aria-hidden="true">#</span>
    </template>
    自定义图标
  </x-link>
  <x-link icon disabled>禁用图标</x-link>
</template>

加载与事件 ​

异步加载点击计数禁用不触发
vue
<template>
  <x-link :loading="loading" @click="runLoading">异步加载</x-link>
  <x-link @click="pushLog('normal')">点击计数</x-link>
  <x-link disabled @click="pushLog('disabled')">禁用不触发</x-link>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const loading = ref(false);
const logs = ref<string[]>([]);

const runLoading = () => {
  loading.value = true;
  logs.value = ['loading link clicked', ...logs.value];
  window.setTimeout(() => {
    loading.value = false;
  }, 1600);
};

const pushLog = (label: string) => {
  logs.value = [`${label} clicked`, ...logs.value];
};
</script>

没有传入 href 时，Link 会作为轻量动作入口处理，可通过键盘聚焦并使用 Enter 或 Space 触发点击事件。

原生链接属性 ​

新窗口外链 下载链接
vue
<template>
  <x-link
    href="https://example.com"
    target="_blank"
    rel="noopener noreferrer"
    aria-label="在新窗口打开示例站点"
  >
    新窗口外链
  </x-link>
  <x-link href="/files/report.pdf" download>下载链接</x-link>
</template>

target、rel、download、aria-*、id、class、style 等原生 <a> 属性会透传到根节点。使用 target="_blank" 时建议同时设置 rel="noopener noreferrer"。

按需导入 ​

ts
import { Link } from 'x-next';

Props ​

参数说明类型默认值
href链接地址string-
status链接状态'normal' | 'warning' | 'success' | 'danger''normal'
hoverable鼠标悬浮时是否展示底色booleantrue
icon是否显示默认图标booleanfalse
loading是否为加载状态，加载中不会触发点击事件booleanfalse
disabled是否禁用，禁用时不会触发点击事件booleanfalse
strong是否加粗，x-next 扩展能力booleanfalse

Events ​

事件名说明回调参数
click点击链接或通过键盘触发动作链接时触发，禁用或加载中不会触发event: MouseEvent | KeyboardEvent

Slots ​

插槽名说明
default链接文本
icon自定义图标