链接 Link

用于页面跳转或操作触发，支持多种状态、尺寸、图标和加载状态。

基础用法

通过 status 属性设置链接状态，支持 primary（默认）、success、warning、danger、gray。

链接

链接

链接

链接

链接

<template>
  <bp-space>
    <bp-link>链接</bp-link>
    <bp-link status="success">链接</bp-link>
    <bp-link status="warning">链接</bp-link>
    <bp-link status="danger">链接</bp-link>
    <bp-link status="gray">链接</bp-link>
  </bp-space>
</template>

尺寸

通过 size 属性设置链接尺寸，支持 mini、small、default、large。

mini 链接

small 链接

default 链接

large 链接

<template>
  <bp-space>
    <bp-link size="mini">mini 链接</bp-link>
    <bp-link size="small">small 链接</bp-link>
    <bp-link>default 链接</bp-link>
    <bp-link size="large">large 链接</bp-link>
  </bp-space>
</template>

禁用与加载

通过 disabled 属性禁用链接，loading 属性显示加载状态，loading-icon 可切换加载图标（1-5）。

禁用链接

加载中

加载中 (图标3)

<template>
  <bp-space>
    <bp-link disabled>禁用链接</bp-link>
    <bp-link loading>加载中</bp-link>
    <bp-link loading :loading-icon="3">加载中 (图标3)</bp-link>
  </bp-space>
</template>

带图标

通过 icon 属性添加前缀图标，href 配合 target="_blank" 可在新窗口打开。

搜索

下载

GitHub

<template>
  <bp-space>
    <bp-link :icon="IconSearchLine">搜索</bp-link>
    <bp-link :icon="IconDownloadLine" status="success">下载</bp-link>
    <bp-link href="https://github.com" target="_blank" :icon="IconExternalLinkLine">GitHub</bp-link>
  </bp-space>
</template>

<script setup lang="ts">
import { IconSearchLine, IconDownloadLine, IconExternalLinkLine } from "birdpaper-icon";
</script>

Link 属性

href	链接地址	String	-	-
status	状态类型	String	primary	-
disabled	是否禁用	Boolean	-	-
loading	是否加载中	Boolean	-	-
loading-icon	加载图标	NumberIcon	1	-
size	尺寸	String	default	-
icon	图标	Component	-	-
target	打开方式	String	_self	-

Link 插槽

default

内容

-

-