Link 链接

用于跳转页面，基于 Element Plus 的 el-link 二次封装，支持自动跳转和点击事件。

基础用法

使用 type 定义链接样式，支持 primary、success、warning、danger、info 五种类型。

展示不同类型的链接样式。

基础类型

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

<template>
  <div class="demo-section">
    <p class="demo-title">基础类型</p>
    <div class="link-demo-row">
      <HxLink href="https://github.com" target="_blank">默认</HxLink>
      <HxLink type="primary">主要</HxLink>
      <HxLink type="success">成功</HxLink>
      <HxLink type="warning">警告</HxLink>
      <HxLink type="danger">危险</HxLink>
      <HxLink type="info">信息</HxLink>
    </div>
  </div>
</template>

<script setup lang="ts">
import { HxLink } from '@whhx/ui'
</script>

<style scoped>
.demo-section {
  padding: 4px 0;
}
.demo-title {
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--el-text-color-secondary);
  font-weight: 500;
}
.link-demo-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}
</style>

下划线模式

通过 underline 属性控制下划线显示方式，支持 always（始终显示）、hover（悬停显示）、never（从不显示）三种模式。

链接下划线三种模式对比。

下划线模式

始终显示悬停显示从不显示

<template>
  <div class="demo-section">
    <p class="demo-title">下划线模式</p>
    <div class="link-demo-row">
      <HxLink href="#" underline="always">始终显示</HxLink>
      <HxLink href="#" underline="hover">悬停显示</HxLink>
      <HxLink href="#" underline="never">从不显示</HxLink>
    </div>
  </div>
</template>

<script setup lang="ts">
import { HxLink } from '@whhx/ui'
</script>

<style scoped>
.demo-section {
  padding: 4px 0;
}
.demo-title {
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--el-text-color-secondary);
  font-weight: 500;
}
.link-demo-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}
</style>

禁用与点击事件

设置 disabled 属性禁用链接，或通过 auto-jump 关闭自动跳转，配合 click 事件实现自定义点击逻辑。

禁用状态下的链接样式，以及通过 click 事件模拟自定义交互。

禁用状态

禁用链接禁用主要链接禁用危险链接

点击事件（无跳转）

带点击事件的链接另一个可点击链接

<template>
  <div class="demo-section">
    <p class="demo-title">禁用状态</p>
    <div class="link-demo-row">
      <HxLink disabled>禁用链接</HxLink>
      <HxLink disabled type="primary">禁用主要链接</HxLink>
      <HxLink disabled type="danger">禁用危险链接</HxLink>
    </div>

    <p class="demo-title link-demo-title-next">点击事件（无跳转）</p>
    <div class="link-demo-row">
      <HxLink :auto-jump="false" @click="handleClick('link1')">带点击事件的链接</HxLink>
      <HxLink :auto-jump="false" @click="handleClick('link2')">另一个可点击链接</HxLink>
    </div>
    <div v-if="lastClicked" class="click-result">
      上次点击：{{ lastClicked }}
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { HxLink } from '@whhx/ui'

const lastClicked = ref('')

const handleClick = (text: string) => {
  lastClicked.value = text
}
</script>

<style scoped>
.demo-section {
  padding: 4px 0;
}
.demo-title {
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--el-text-color-secondary);
  font-weight: 500;
}
.link-demo-title-next {
  margin-top: 28px;
}
.link-demo-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}
.click-result {
  margin-top: 12px;
  font-size: 13px;
  color: #409eff;
}
</style>

图标组合

链接可以与图标组件配合使用，增强交互提示。

图标与链接组合使用。

带图标的链接

编辑 查看 删除

<template>
  <div class="demo-section">
    <p class="demo-title">带图标的链接</p>
    <div class="link-demo-row">
      <HxLink underline="hover">
        <IconifyIcon icon="ep:edit" />
        编辑
      </HxLink>
      <HxLink underline="never">
        <IconifyIcon icon="ep:view" />
        查看
      </HxLink>
      <HxLink underline="never">
        <IconifyIcon icon="ep:delete" />
        删除
      </HxLink>
    </div>
  </div>
</template>

<script setup lang="ts">
import { HxLink, IconifyIcon } from '@whhx/ui'
</script>

<style scoped>
.demo-section {
  padding: 4px 0;
}
.demo-title {
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--el-text-color-secondary);
  font-weight: 500;
}
.link-demo-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}
</style>

自动跳转

通过 auto-jump 属性控制点击 href 链接时是否自动跳转。

auto-jump 开关对比。

自动跳转

跳转到 GitHub点击后不跳转

:auto-jump="false" 时，链接有 href 但不会导航，仅触发 click 事件。

<template>
  <div class="demo-section">
    <p class="demo-title">自动跳转</p>
    <div class="link-demo-row">
      <HxLink href="https://github.com" :auto-jump="true">跳转到 GitHub</HxLink>
      <HxLink href="https://github.com" :auto-jump="false">点击后不跳转</HxLink>
    </div>
    <p class="demo-desc">
      <code>:auto-jump="false"</code> 时，链接有 href 但不会导航，仅触发 click 事件。
    </p>
  </div>
</template>

<script setup lang="ts">
import { HxLink } from '@whhx/ui'
</script>

<style scoped>
.demo-section {
  padding: 4px 0;
}
.demo-title {
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--el-text-color-secondary);
  font-weight: 500;
}
.link-demo-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}
.demo-desc {
  margin: 12px 0 0;
  font-size: 13px;
  color: var(--el-text-color-secondary);
}
.demo-desc code {
  color: #409eff;
}
</style>

API

Props

名称	说明	类型	默认值
auto-jump	点击后是否自动跳转	boolean	true

其余 ElLink 原生属性均可直接使用，包括 href、target、type、underline、disabled 等。

Events

事件名	说明	回调参数
click	点击事件	(e: MouseEvent)

Slots

插槽名	说明
default	链接内容