标签 Tag ​

展示简短信息，用于数据选择、分类。

基础用法 ​

基础标签用法

<template>
  <bp-tag>Tag 1</bp-tag>
</template>

标签状态 ​

一共有 5 种标签状态，它们通过status 属性控制，分别是normal - 普通，primary - 主要，success - 成功，warning - 警告，danger - 危险。

<template>
  <bp-space>
    <bp-tag>Tag 1</bp-tag>
    <bp-tag status="primary">Tag 2</bp-tag>
    <bp-tag status="success">Tag 3</bp-tag>
    <bp-tag status="warning">Tag 4</bp-tag>
    <bp-tag status="danger">Tag 5</bp-tag>
  </bp-space>
</template>

可关闭 ​

可通过 closeable 控制标签关闭

<template>
  <bp-tag v-if="show" @close="onClose" closeable>Closeable tag</bp-tag>
</template>

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

const show = ref<boolean>(true);
const onClose = () => {
  show.value = false;
};
</script>

Tag 属性 ​

icon
图标组件
BirdpaperIcon
-
status
标签状态
Enum
normal
dot
状态是否为点状样式
Boolean
false
closeable
是否支持关闭
Boolean
false

Tag 事件 ​

close
关闭标签触发
-

Tag 插槽 ​

icon
图标
-