Vue

Link

简介

Link 组件是一个功能强大的链接组件，不仅支持传统的链接样式，还提供了按钮风格、动画效果和丰富的自定义选项。通过语义化的属性配置，无需手动编写 CSS 类名即可实现各种视觉效果。

组件特性：

支持多种样式变体（default、primary、secondary、text、cta、ghost、light、navigation、github）
支持多种尺寸（sm、md、lg）
支持动画效果（hover-lift、hover-glow、hover-scale）
支持按钮风格和幽灵按钮
支持图标插槽（左侧、右侧、导航、GitHub）
支持外部链接自动新窗口打开
支持块级显示和全宽显示
响应式设计，适配不同屏幕尺寸

案例

<script setup lang="ts">
import { Link } from '@coffic/cosy-ui/vue';
</script>

<template>
    <div style="display: flex; flex-direction: column; gap: 1rem;">
        <Link href="/about">关于我们</Link>
        <Link href="/contact">联系我们</Link>
        <Link href="/docs">文档</Link>
    </div>
</template>

Props

active

是否为激活状态。

首页（激活状态）

关于我们（非激活状态）

<script setup lang="ts">
import { Link } from '@coffic/cosy-ui/vue';
</script>

<template>
    <div style="display: flex; flex-direction: column; gap: 1rem;">
        <Link href="/home" :active="true">首页（激活状态）</Link>
    </div>
</template>

首页（激活状态）

关于我们（非激活状态）

<script setup lang="ts">
import { Link } from '@coffic/cosy-ui/vue';
</script>

<template>
    <div style="display: flex; flex-direction: column; gap: 1rem;">
        <Link href="/about" :active="false">关于我们（非激活状态）</Link>
    </div>
</template>

align

对齐方式。可选值：left、center、right。

左对齐链接

居中对齐链接

右对齐链接

<script setup lang="ts">
import { Link } from '@coffic/cosy-ui/vue';
</script>

<template>
    <div style="border: 1px solid #e5e7eb; padding: 1rem; width: 300px;">
        <Link href="/left" align="left">左对齐链接</Link>
    </div>
</template>

左对齐链接

居中对齐链接

右对齐链接

<script setup lang="ts">
import { Link } from '@coffic/cosy-ui/vue';
</script>

<template>
    <div style="border: 1px solid #e5e7eb; padding: 1rem; width: 300px;">
        <Link href="/center" align="center">居中对齐链接</Link>
    </div>
</template>

左对齐链接

居中对齐链接

右对齐链接

<script setup lang="ts">
import { Link } from '@coffic/cosy-ui/vue';
</script>

<template>
    <div style="border: 1px solid #e5e7eb; padding: 1rem; width: 300px;">
        <Link href="/right" align="right">右对齐链接</Link>
    </div>
</template>

animation

动画效果，定义鼠标悬停时的动画行为。可选值：none、hover-lift、hover-glow、hover-scale。

<script setup lang="ts">
import { Link } from '@coffic/cosy-ui/vue';
</script>

<template>
    <div style="display: flex; flex-direction: column; gap: 1rem;">
        <Link href="/none" animation="none">无动画效果</Link>
    </div>
</template>

<script setup lang="ts">
import { Link } from '@coffic/cosy-ui/vue';
</script>

<template>
    <div style="display: flex; flex-direction: column; gap: 1rem;">
        <Link href="/lift" animation="hover-lift">悬停上浮效果</Link>
    </div>
</template>

<script setup lang="ts">
import { Link } from '@coffic/cosy-ui/vue';
</script>

<template>
    <div style="display: flex; flex-direction: column; gap: 1rem;">
        <Link href="/glow" animation="hover-glow">悬停发光效果</Link>
    </div>
</template>

<script setup lang="ts">
import { Link } from '@coffic/cosy-ui/vue';
</script>

<template>
    <div style="display: flex; flex-direction: column; gap: 1rem;">
        <Link href="/scale" animation="hover-scale">悬停缩放效果</Link>
    </div>
</template>

block

是否为块级显示，设置为 true 时链接会独占一行。

内联链接（默认）

这是一段文字，其中包含一个内联链接。

块级链接

<script setup lang="ts">
import { Link } from '@coffic/cosy-ui/vue';
</script>

<template>
    <div style="display: flex; flex-direction: column; gap: 1rem;">
        <Link href="/inline">内联链接（默认）</Link>
        <p>这是一段文字，其中包含一个
            <Link href="/inline">内联链接</Link>。
        </p>
    </div>
</template>

内联链接（默认）

这是一段文字，其中包含一个内联链接。

块级链接

<script setup lang="ts">
import { Link } from '@coffic/cosy-ui/vue';
</script>

<template>
    <div style="display: flex; flex-direction: column; gap: 1rem;">
        <Link href="/block" :block="true">块级链接</Link>
    </div>
</template>

btn

是否启用按钮风格，设置为 true 时会应用按钮样式。

普通链接

按钮风格链接

主要按钮链接

<script setup lang="ts">
import { Link } from '@coffic/cosy-ui/vue';
</script>

<template>
    <div style="display: flex; flex-direction: column; gap: 1rem;">
        <Link href="/normal">普通链接</Link>
    </div>
</template>

普通链接

按钮风格链接

主要按钮链接

<script setup lang="ts">
import { Link } from '@coffic/cosy-ui/vue';
</script>

<template>
    <div style="display: flex; flex-direction: column; gap: 1rem;">
        <Link href="/button" :btn="true">按钮风格链接</Link>
    </div>
</template>

普通链接

按钮风格链接

主要按钮链接

<script setup lang="ts">
import { Link } from '@coffic/cosy-ui/vue';
</script>

<template>
    <div style="display: flex; flex-direction: column; gap: 1rem;">
        <Link href="/primary" :btn="true" variant="primary">主要按钮链接</Link>
    </div>
</template>

circle

是否为圆形按钮，需要配合 btn 属性使用。

普通按钮链接

圆形按钮链接

<script setup lang="ts">
import { Link } from '@coffic/cosy-ui/vue';
</script>

<template>
    <div style="display: flex; flex-direction: column; gap: 1rem;">
        <Link href="/normal" :btn="true">普通按钮链接</Link>
    </div>
</template>

普通按钮链接

圆形按钮链接

<script setup lang="ts">
import { Link } from '@coffic/cosy-ui/vue';
</script>

<template>
    <div style="display: flex; flex-direction: column; gap: 1rem;">
        <Link href="/circle" :btn="true" :circle="true">圆形按钮链接</Link>
    </div>
</template>

class

自定义 CSS 类名。

默认样式

自定义样式

<script setup lang="ts">
import { Link } from '@coffic/cosy-ui/vue';
</script>

<template>
    <div style="display: flex; flex-direction: column; gap: 1rem;">
        <Link href="/default">默认样式</Link>
    </div>
</template>

默认样式

自定义样式

<script setup lang="ts">
import { Link } from '@coffic/cosy-ui/vue';
</script>

<template>
    <div style="display: flex; flex-direction: column; gap: 1rem;">
        <Link href="/custom" class="text-red-500 font-bold">自定义样式</Link>
    </div>
</template>

class:list

类名列表。

默认样式

类名列表样式

<script setup lang="ts">
import { Link } from '@coffic/cosy-ui/vue';
</script>

<template>
    <div style="display: flex; flex-direction: column; gap: 1rem;">
        <Link href="/default">默认样式</Link>
    </div>
</template>

默认样式

类名列表样式

<script setup lang="ts">
import { Link } from '@coffic/cosy-ui/vue';
</script>

<template>
    <div style="display: flex; flex-direction: column; gap: 1rem;">
        <Link href="/custom" :class:list="['text-blue-500', 'font-semibold']">类名列表样式</Link>
    </div>
</template>

color

按钮颜色，需要配合 btn 属性使用。可选值：primary、secondary、accent、info、success、warning、error。

<script setup lang="ts">
import { Link } from '@coffic/cosy-ui/vue';
</script>

<template>
    <div style="display: flex; flex-direction: column; gap: 1rem;">
        <Link href="/primary" :btn="true" color="primary">主要颜色</Link>
    </div>
</template>

<script setup lang="ts">
import { Link } from '@coffic/cosy-ui/vue';
</script>

<template>
    <div style="display: flex; flex-direction: column; gap: 1rem;">
        <Link href="/secondary" :btn="true" color="secondary">次要颜色</Link>
    </div>
</template>

<script setup lang="ts">
import { Link } from '@coffic/cosy-ui/vue';
</script>

<template>
    <div style="display: flex; flex-direction: column; gap: 1rem;">
        <Link href="/accent" :btn="true" color="accent">强调颜色</Link>
    </div>
</template>

<script setup lang="ts">
import { Link } from '@coffic/cosy-ui/vue';
</script>

<template>
    <div style="display: flex; flex-direction: column; gap: 1rem;">
        <Link href="/info" :btn="true" color="info">信息颜色</Link>
    </div>
</template>

<script setup lang="ts">
import { Link } from '@coffic/cosy-ui/vue';
</script>

<template>
    <div style="display: flex; flex-direction: column; gap: 1rem;">
        <Link href="/success" :btn="true" color="success">成功颜色</Link>
    </div>
</template>

<script setup lang="ts">
import { Link } from '@coffic/cosy-ui/vue';
</script>

<template>
    <div style="display: flex; flex-direction: column; gap: 1rem;">
        <Link href="/warning" :btn="true" color="warning">警告颜色</Link>
    </div>
</template>

<script setup lang="ts">
import { Link } from '@coffic/cosy-ui/vue';
</script>

<template>
    <div style="display: flex; flex-direction: column; gap: 1rem;">
        <Link href="/error" :btn="true" color="error">错误颜色</Link>
    </div>
</template>

debug

是否显示调试边框。

正常模式

调试模式

<script setup lang="ts">
import { Link } from '@coffic/cosy-ui/vue';
</script>

<template>
    <div style="display: flex; flex-direction: column; gap: 1rem;">
        <Link href="/normal">正常模式</Link>
    </div>
</template>

正常模式

调试模式

<script setup lang="ts">
import { Link } from '@coffic/cosy-ui/vue';
</script>

<template>
    <div style="display: flex; flex-direction: column; gap: 1rem;">
        <Link href="/debug" :debug="true">调试模式</Link>
    </div>
</template>

external

是否为外部链接，设置为 true 时会自动在新窗口打开。

内部链接

外部链接

<script setup lang="ts">
import { Link } from '@coffic/cosy-ui/vue';
</script>

<template>
    <div style="display: flex; flex-direction: column; gap: 1rem;">
        <Link href="/internal">内部链接</Link>
    </div>
</template>

内部链接

外部链接

<script setup lang="ts">
import { Link } from '@coffic/cosy-ui/vue';
</script>

<template>
    <div style="display: flex; flex-direction: column; gap: 1rem;">
        <Link href="https://example.com" :external="true">外部链接</Link>
    </div>
</template>

fullWidth

是否占满宽度。

普通宽度

全宽显示

<script setup lang="ts">
import { Link } from '@coffic/cosy-ui/vue';
</script>

<template>
    <div style="display: flex; flex-direction: column; gap: 1rem;">
        <Link href="/normal">普通宽度</Link>
    </div>
</template>

普通宽度

全宽显示

<script setup lang="ts">
import { Link } from '@coffic/cosy-ui/vue';
</script>

<template>
    <div style="display: flex; flex-direction: column; gap: 1rem;">
        <Link href="/full" :full-width="true">全宽显示</Link>
    </div>
</template>

ghost

是否为幽灵按钮，需要配合 btn 属性使用。

普通按钮

幽灵按钮

<script setup lang="ts">
import { Link } from '@coffic/cosy-ui/vue';
</script>

<template>
    <div style="display: flex; flex-direction: column; gap: 1rem;">
        <Link href="/normal" :btn="true">普通按钮</Link>
    </div>
</template>

普通按钮

幽灵按钮

<script setup lang="ts">
import { Link } from '@coffic/cosy-ui/vue';
</script>

<template>
    <div style="display: flex; flex-direction: column; gap: 1rem;">
        <Link href="/ghost" :btn="true" :ghost="true">幽灵按钮</Link>
    </div>
</template>

href

链接地址，必需属性。

关于我们联系我们文档

<script setup lang="ts">
import { Link } from '@coffic/cosy-ui/vue';
</script>

<template>
    <div style="display: flex; flex-direction: column; gap: 1rem;">
        <Link href="/about">关于我们</Link>
        <Link href="/contact">联系我们</Link>
        <Link href="/docs">文档</Link>
    </div>
</template>

icon

图标名称，支持所有可用的图标组件。

<script setup lang="ts">
import { Link } from '@coffic/cosy-ui/vue';
</script>

<template>
    <div style="display: flex; flex-direction: column; gap: 1rem;">
        <Link href="/home">
        <template #icon-left>
            <span>🏠</span>
        </template>
        首页
        </Link>
    </div>
</template>

<script setup lang="ts">
import { Link } from '@coffic/cosy-ui/vue';
</script>

<template>
    <div style="display: flex; flex-direction: column; gap: 1rem;">
        <Link href="/settings">
        <template #icon-left>
            <span>⚙️</span>
        </template>
        设置
        </Link>
    </div>
</template>

<script setup lang="ts">
import { Link } from '@coffic/cosy-ui/vue';
</script>

<template>
    <div style="display: flex; flex-direction: column; gap: 1rem;">
        <Link href="/search">
        <template #icon-left>
            <span>🔍</span>
        </template>
        搜索
        </Link>
    </div>
</template>

<script setup lang="ts">
import { Link } from '@coffic/cosy-ui/vue';
</script>

<template>
    <div style="display: flex; flex-direction: column; gap: 1rem;">
        <Link href="/user">
        <template #icon-left>
            <span>👤</span>
        </template>
        用户
        </Link>
    </div>
</template>

navigationType

导航类型，需要配合 navigation 变体使用。可选值：previous、next。

← 上一页

<script setup lang="ts">
import { Link } from '@coffic/cosy-ui/vue';
</script>

<template>
    <div style="display: flex; flex-direction: column; gap: 1rem;">
        <Link href="/previous" navigation-type="previous">
        <template #icon-previous>
            <span>←</span>
        </template>
        上一页
        </Link>
    </div>
</template>

← 上一页

<script setup lang="ts">
import { Link } from '@coffic/cosy-ui/vue';
</script>

<template>
    <div style="display: flex; flex-direction: column; gap: 1rem;">
        <Link href="/next" navigation-type="next">
        <template #icon-next>
            <span>→</span>
        </template>
        下一页
        </Link>
    </div>
</template>

noUnderline

是否移除下划线，默认为 true。

带下划线

无下划线

<script setup lang="ts">
import { Link } from '@coffic/cosy-ui/vue';
</script>

<template>
    <div style="display: flex; flex-direction: column; gap: 1rem;">
        <Link href="/with">带下划线</Link>
    </div>
</template>

带下划线

无下划线

<script setup lang="ts">
import { Link } from '@coffic/cosy-ui/vue';
</script>

<template>
    <div style="display: flex; flex-direction: column; gap: 1rem;">
        <Link href="/without" :no-underline="true">无下划线</Link>
    </div>
</template>

rounded

是否添加圆角。

普通链接

圆角链接

<script setup lang="ts">
import { Link } from '@coffic/cosy-ui/vue';
</script>

<template>
    <div style="display: flex; flex-direction: column; gap: 1rem;">
        <Link href="/normal">普通链接</Link>
    </div>
</template>

普通链接

圆角链接

<script setup lang="ts">
import { Link } from '@coffic/cosy-ui/vue';
</script>

<template>
    <div style="display: flex; flex-direction: column; gap: 1rem;">
        <Link href="/rounded" :rounded="true">圆角链接</Link>
    </div>
</template>

size

尺寸大小，控制链接的字体大小和间距。可选值：sm、md、lg。

小型

中型

大型

<script setup lang="ts">
import { Link } from '@coffic/cosy-ui/vue';
</script>

<template>
    <div style="display: flex; flex-direction: column; gap: 1rem;">
        <Link href="/small" size="sm">小型</Link>
    </div>
</template>

小型

中型

大型

<script setup lang="ts">
import { Link } from '@coffic/cosy-ui/vue';
</script>

<template>
    <div style="display: flex; flex-direction: column; gap: 1rem;">
        <Link href="/medium" size="md">中型</Link>
    </div>
</template>

小型

中型

大型

<script setup lang="ts">
import { Link } from '@coffic/cosy-ui/vue';
</script>

<template>
    <div style="display: flex; flex-direction: column; gap: 1rem;">
        <Link href="/large" size="lg">大型</Link>
    </div>
</template>

variant

样式变体，用于定义链接的视觉风格。可选值：default、primary、secondary、text、cta、ghost、light、navigation、github。

Link

简介

案例

Props

active

align

animation

block

btn

circle

class

class:list

color

debug

external

fullWidth

ghost

href

icon

navigationType

noUnderline

rounded

size

variant

Slots

default

icon-left

icon-right

icon-previous

icon-next

icon-github