Vue.js - 技术栈

TinyVue Link 链接组件使用指南

本文是 TinyVue 组件库使用指南系列的第六篇，将详细介绍 Link 链接组件的用法、属性、事件、插槽和最佳实践。

前言

链接（Link）是页面导航的基础元素，常用于文字跳转、操作引导和辅助入口。TinyVue 的 Link 组件在原生 <a> 标签基础上封装了主题样式、禁用状态、下划线控制、图标配置和打开方式等能力，让文字链接既保持语义化又具备丰富的交互表现。

组件介绍

Link 组件是一个文字超链接，支持多种主题类型、禁用状态、下划线控制、自定义图标和链接跳转配置。

核心特性

6 种主题类型：default / primary / success / warning / danger / info
禁用状态：禁用后不可点击，不触发 click 事件
下划线控制：可关闭悬浮下划线效果
自定义图标：支持属性传入、插槽两种方式
链接跳转 ：支持 href + target 原生跳转配置
尺寸：支持默认和 medium 两种尺寸

基本用法

通过 value 属性或默认插槽设置链接显示内容：

vue 复制代码

<template>
  <div>
    <!-- 通过默认插槽设置内容 -->
    <tiny-link @click="handleClick">默认链接</tiny-link>

    <!-- 通过 value 属性设置内容 -->
    <tiny-link value="默认链接2"></tiny-link>
  </div>
</template>

<script setup>
import { TinyLink } from '@opentiny/vue'

function handleClick() {
  console.log('clicked')
}
</script>

注意：当设置了 disabled 或 href 属性时，click 事件不会触发 ！这是有意为之------禁用状态不应响应点击，配置了 href 则由浏览器原生跳转处理。

主题样式

通过 type 属性设置链接的主题类型，共 6 种：

vue 复制代码

<template>
  <div>
    <tiny-link>默认链接</tiny-link>
    <tiny-link type="primary">主要链接</tiny-link>
    <tiny-link type="success">成功链接</tiny-link>
    <tiny-link type="warning">警告链接</tiny-link>
    <tiny-link type="danger">危险链接</tiny-link>
    <tiny-link type="info">信息链接</tiny-link>
  </div>
</template>

<script setup>
import { TinyLink } from '@opentiny/vue'
</script>

type 值	说明	典型场景
(默认)	默认样式	普通文字链接
primary	主要链接	主要操作入口
success	成功链接	成功状态提示
warning	警告链接	警告提示
danger	危险链接	删除、危险操作
info	信息链接	辅助信息入口

禁用链接

通过 disabled 属性禁用链接，禁用后文字变灰且不可点击：

vue 复制代码

<template>
  <div>
    <tiny-link disabled>默认链接</tiny-link>
    <tiny-link type="primary" disabled>主要链接</tiny-link>
    <tiny-link type="success" disabled>成功链接</tiny-link>
    <tiny-link type="warning" disabled>警告链接</tiny-link>
    <tiny-link type="danger" disabled>危险链接</tiny-link>
    <tiny-link type="info" disabled>信息链接</tiny-link>
  </div>
</template>

<script setup>
import { TinyLink } from '@opentiny/vue'
</script>

提示：禁用状态下 click 事件不会触发。

下划线控制

通过 underline 属性控制鼠标悬浮时是否显示下划线，默认为 true：

vue 复制代码

<template>
  <div>
    <!-- 无下划线 -->
    <tiny-link :underline="false">无下划线</tiny-link>

    <!-- 有下划线（默认） -->
    <tiny-link>有下划线</tiny-link>
  </div>
</template>

<script setup>
import { TinyLink } from '@opentiny/vue'
</script>

建议：在导航菜单、面包屑等场景中，通常关闭下划线（:underline="false"），保持界面简洁。

自定义图标

Link 组件支持三种方式自定义图标：icon 属性、icon 插槽和默认插槽内放置图标。

方式一：通过 icon 属性传入

vue 复制代码

<template>
  <tiny-link :icon="TinyIconEdit">编辑</tiny-link>
</template>

<script setup>
import { TinyLink } from '@opentiny/vue'
import { iconEdit } from '@opentiny/vue-icon'

const TinyIconEdit = iconEdit()
</script>

方式二：通过 icon 插槽

vue 复制代码

<template>
  <tiny-link>
    <template #icon>
      <tiny-icon-del class="tiny-svg-size" />
    </template>
    删除
  </tiny-link>
</template>

<script setup>
import { TinyLink } from '@opentiny/vue'
import { IconDeleteL } from '@opentiny/vue-icon'

const TinyIconDel = IconDeleteL()
</script>

方式三：默认插槽内放置图标

vue 复制代码

<template>
  <tiny-link>
    查看
    <tiny-icon-search class="tiny-svg-size" />
  </tiny-link>
</template>

<script setup>
import { TinyLink } from '@opentiny/vue'
import { iconSearch } from '@opentiny/vue-icon'

const TinyIconSearch = iconSearch()
</script>

区别：icon 属性和 icon 插槽的图标显示在文字左侧；默认插槽内的图标位置由书写顺序决定，可以放在文字右侧。

链接地址与打开方式

配置 href 跳转

通过 href 属性设置链接地址，配合 target 控制打开方式：

vue 复制代码

<template>
  <tiny-link
    :underline="false"
    href="https://opentiny.design/tiny-vue"
    target="_blank"
  >
    访问 TinyVue 官网
  </tiny-link>
</template>

<script setup>
import { TinyLink } from '@opentiny/vue'
</script>

注意：配置了 href 后，click 事件不会触发，由浏览器原生跳转处理。

target 打开方式

target 属性支持以下值：

vue 复制代码

<template>
  <div>
    <!-- 在新窗口打开 -->
    <tiny-link href="https://opentiny.design/tiny-vue" target="_blank">
      在新窗口打开
    </tiny-link>

    <!-- 在当前窗口打开（默认） -->
    <tiny-link href="https://opentiny.design/tiny-vue" target="_self">
      在当前窗口打开
    </tiny-link>

    <!-- 在父框架中打开 -->
    <tiny-link href="https://opentiny.design/tiny-vue" target="_parent">
      在父框架中打开
    </tiny-link>

    <!-- 在整个窗口中打开 -->
    <tiny-link href="https://opentiny.design/tiny-vue" target="_top">
      在整个窗口中打开
    </tiny-link>
  </div>
</template>

<script setup>
import { TinyLink } from '@opentiny/vue'
</script>

target 值	说明
`_self`	在当前窗口/框架打开（默认）
`_blank`	在新窗口打开
`_parent`	在父框架中打开
`_top`	在整个窗口中打开（跳出所有框架）

尺寸

通过 size 属性设置链接尺寸：

vue 复制代码

<template>
  <div>
    <!-- 默认尺寸 -->
    <tiny-link :underline="false">默认链接</tiny-link>

    <!-- medium 尺寸 -->
    <tiny-link :underline="false" size="medium">默认链接</tiny-link>

    <!-- 带图标的默认尺寸 -->
    <tiny-link :underline="false" :icon="TinyIconEdit">编辑</tiny-link>

    <!-- 带图标的 medium 尺寸 -->
    <tiny-link :underline="false" size="medium" :icon="TinyIconEdit">编辑</tiny-link>
  </div>
</template>

<script setup>
import { TinyLink } from '@opentiny/vue'
import { iconEdit } from '@opentiny/vue-icon'

const TinyIconEdit = iconEdit()
</script>

API 参考

Props

属性名	类型	默认值	说明
disabled	boolean	false	是否禁用状态
href	string	-	原生 href 属性，配置后 click 事件不触发
icon	Component	-	图标组件，显示在文字左侧
type	`'primary'	'success'	'warning'
underline	boolean	true	鼠标悬浮时是否显示下划线
value	string	-	显示内容（也可用默认插槽）
target	`'_self'	'_blank'	'_parent'
size	string	-	链接尺寸，可选 `'medium'`

Events

事件名	回调参数	说明
click	(ev: MouseEvent) => void	点击事件（disabled 或 href 存在时不触发）

Slots

插槽名	说明
default	默认插槽，设置链接显示内容
icon	图标插槽，自定义左侧图标

最佳实践

1. 路由跳转使用 click 事件而非 href

在 SPA 应用中，推荐使用 click 事件配合路由进行页面跳转，而非 href：

vue 复制代码

<template>
  <!-- 推荐：SPA 内部跳转 -->
  <tiny-link @click="goToDetail">查看详情</tiny-link>

  <!-- 不推荐：SPA 内部用 href 会导致整页刷新 -->
  <tiny-link href="/detail">查看详情</tiny-link>
</template>

<script setup>
import { useRouter } from 'vue-router'
import { TinyLink } from '@opentiny/vue'

const router = useRouter()

function goToDetail() {
  router.push('/detail')
}
</script>

2. 外部链接使用 href + target="_blank"

vue 复制代码

<template>
  <tiny-link href="https://opentiny.design" target="_blank">
    访问官网
  </tiny-link>
</template>

3. 导航场景关闭下划线

面包屑、侧边导航等场景建议关闭下划线，保持界面整洁：

vue 复制代码

<template>
  <tiny-link :underline="false" type="primary">首页</tiny-link>
  <tiny-link :underline="false">产品列表</tiny-link>
  <tiny-link :underline="false" disabled>当前页</tiny-link>
</template>

4. 危险操作使用 danger 类型

删除、注销等危险操作链接使用 danger 类型，引起用户注意：

vue 复制代码

<template>
  <tiny-link type="danger" :icon="TinyIconDel">删除</tiny-link>
</template>

<script setup>
import { TinyLink } from '@opentiny/vue'
import { iconDel } from '@opentiny/vue-icon'

const TinyIconDel = iconDel()
</script>

5. 禁用状态替代隐藏

当链接暂时不可用时，优先使用 disabled 而非 v-if 隐藏，让用户知道功能存在但暂不可用：

vue 复制代码

<template>
  <!-- 推荐：禁用，用户知道功能存在 -->
  <tiny-link :disabled="!hasPermission">高级设置</tiny-link>

  <!-- 不推荐：隐藏，用户不知道功能存在 -->
  <tiny-link v-if="hasPermission">高级设置</tiny-link>
</template>

总结

TinyVue Link 组件在原生 <a> 标签基础上提供了 6 种主题类型、禁用状态、下划线控制、图标配置和跳转方式等能力。核心要点：value 或默认插槽设置内容；type 控制主题；disabled 禁用后不触发 click；underline 控制下划线；href 配置后 click 不触发；SPA 内部跳转用 click + router，外部跳转用 href + target。掌握这些规则后，链接的使用将变得简洁高效。

OpenTiny NEXT 是一套企业智能前端开发解决方案，以生成式 UI 和 WebMCP 两大核心技术为基础，对现有传统的 TinyVue 组件库、TinyEngine 低代码引擎等产品进行智能化升级，构建出面向 Agent 应用的前端 NEXT-SDKs、AI Extension、TinyRobot智能助手、GenUI等新产品，实现AI理解用户意图自主完成任务，加速企业应用的智能化改造。