Linker 链接

代码示例

基本使用

设置 type 属性可以生成不同类型的链接。

链接链接链接链接链接链接

<template>
  <chi-linker>链接</chi-linker>
  <chi-linker type="primary">链接</chi-linker>
  <chi-linker type="info">链接</chi-linker>
  <chi-linker type="success">链接</chi-linker>
  <chi-linker type="warning">链接</chi-linker>
  <chi-linker type="error">链接</chi-linker>
</template>

禁用状态

添加 disabled 属性可以禁用链接。

链接链接链接链接链接链接

<template>
  <chi-linker disabled>链接</chi-linker>
  <chi-linker disabled type="primary">链接</chi-linker>
  <chi-linker disabled type="info">链接</chi-linker>
  <chi-linker disabled type="success">链接</chi-linker>
  <chi-linker disabled type="warning">链接</chi-linker>
  <chi-linker disabled type="error">链接</chi-linker>
</template>

添加图标

使用 icon 属性或者同名插槽为链接添加前置图标。

链接链接链接链接链接 链接

<template>
  <chi-linker :icon="Upload">链接</chi-linker>
  <chi-linker type="primary" :icon="Download">链接</chi-linker>
  <chi-linker type="info" :icon="Link">链接</chi-linker>
  <chi-linker type="success" :icon="Link2">链接</chi-linker>
  <chi-linker type="warning" :icon="ExternalLink">链接</chi-linker>
  <chi-linker type="error">
    <template #icon>
      <chi-icon class="chi-linker__icon" :icon="Cable"></chi-icon>
      <!-- 添加 `class="chi-linker__icon"` 获得 3px 间距 -->
    </template>
    链接
  </chi-linker>
</template>

<script setup>
import { Cable, Download, ExternalLink, Link, Link2, Upload } from 'lucide-vue-next'
</script>

下划线

添加 underline 属性在鼠标移入链接时显示下划线。

链接链接链接链接链接链接

<template>
  <chi-linker underline>链接</chi-linker>
  <chi-linker underline type="primary">链接</chi-linker>
  <chi-linker underline type="info">链接</chi-linker>
  <chi-linker underline type="success">链接</chi-linker>
  <chi-linker underline type="warning">链接</chi-linker>
  <chi-linker underline type="error">链接</chi-linker>
</template>

API

预设类型

type LinkerType = 'default' | 'primary' | 'info' | 'success' | 'warning' | 'error'

Linker 属性

名称	类型	说明	默认值
disabled	boolean	设置是否为禁用状态	false
icon	LucideIcon	链接的前置图标名称	null
target	HTMLAnchorElement.target	同 <a> 标签的 target 属性	''
to	HTMLAnchorElement.href	链接的目标地址	''
type	LinkerType	链接的类型	'default'
underline	boolean	设置鼠标移入时是否显示下划线	false

Linker 事件

名称	说明	参数
click	左键点击链接时触发，返回点击的事件对象	(event: MouseEvent)

Linker 插槽

名称	说明	参数
default	链接内容插槽
icon	链接的前置图标插槽