标签 Tag

基础用法

通过 status 属性设置标签的状态，配合 border 属性显示边框。支持 5 种状态：gray - 灰度（默认），primary - 主要，success - 成功，warning - 警示，danger - 危险。

Tag 1

Tag 2

Tag 3

Tag 4

Tag 5

<template>
  <bp-space>
    <bp-tag v-for="(item, index) in status" :key="item" border :status="item">Tag {{ index + 1 }}</bp-tag>
  </bp-space>
</template>

<script setup lang="ts">
import { TagStatus } from "@birdpaper-ui/components";
import { ref } from "vue";

const status = ref<TagStatus[]>(["gray", "primary", "success", "warning", "danger"]);
</script>

无边框

默认不带边框，适合在紧凑的场景中使用。

Tag gray

Tag primary

Tag success

Tag warning

Tag danger

<template>
  <bp-space>
    <bp-tag v-for="item in status" :key="item" :status="item">Tag {{ item }}</bp-tag>
  </bp-space>
</template>

<script setup lang="ts">
import { TagStatus } from "@birdpaper-ui/components";
import { ref } from "vue";

const status = ref<TagStatus[]>(["gray", "primary", "success", "warning", "danger"]);
</script>

图标

通过 icon 属性为标签添加图标，增强信息的可视化表达。

成功

失败

警告

信息

<template>
  <bp-space>
    <bp-tag :icon="IconCheckLine" status="success">成功</bp-tag>
    <bp-tag :icon="IconCloseCircleLine" status="danger">失败</bp-tag>
    <bp-tag :icon="IconErrorWarningLine" status="warning">警告</bp-tag>
    <bp-tag :icon="IconInformationLine" status="primary">信息</bp-tag>
  </bp-space>
</template>

<script setup lang="ts">
import { IconCheckLine, IconCloseCircleLine, IconErrorWarningLine, IconInformationLine } from "birdpaper-icon";
</script>

可关闭

设置 closeable 属性显示关闭按钮，点击时触发 close 事件。

标签一

标签二

标签三

标签四

标签五

<template>
  <bp-space>
    <bp-tag v-for="item in tags" :key="item" :status="item.status" closeable @close="handleClose(item)">
      {{ item.label }}
    </bp-tag>
  </bp-space>
</template>

<script setup lang="ts">
import { ref } from "vue";

interface TagItem {
  label: string;
  status: string;
}

const tags = ref<TagItem[]>([
  { label: "标签一", status: "gray" },
  { label: "标签二", status: "primary" },
  { label: "标签三", status: "success" },
  { label: "标签四", status: "warning" },
  { label: "标签五", status: "danger" },
]);

const handleClose = (item: TagItem) => {
  tags.value = tags.value.filter((t) => t !== item);
};
</script>

Tag 属性

icon	图标组件	Component	-	-
status	标签状态	String	gray	-
border	是否显示边框	Boolean	-	-
closeable	是否可关闭	Boolean	-	-

Tag 事件

close

点击关闭按钮时触发

-

-

Tag 插槽

default

标签内容

-

-