Tag 标签

用于标记与分类。五种语义变体、两档尺寸，可关闭、可描边、可胶囊形。

语义变体

默认主要成功警告危险

<SrTag>默认</SrTag>
<SrTag variant="primary">主要</SrTag>
<SrTag variant="success">成功</SrTag>
<SrTag variant="warning">警告</SrTag>
<SrTag variant="danger">危险</SrTag>

<SrTag>默认</SrTag>
<SrTag variant="primary">主要</SrTag>
<SrTag variant="success">成功</SrTag>
<SrTag variant="warning">警告</SrTag>
<SrTag variant="danger">危险</SrTag>

用语义名而不是颜色名（success 而不是 green）： 切主题时颜色会变，语义不会。写 variant="green" 的代码在暗色主题下 往往需要重新挑一遍颜色。

尺寸

小标签中标签

<SrTag size="sm">小标签</SrTag>
<SrTag size="md">中标签</SrTag>

可关闭

传入 closable 后出现关闭按钮。标签自身不移除自己—— 它不知道该从哪个数组里删，这属于宿主的数据管理。

点叉关闭可关闭

<script setup>
import { ref } from 'vue'

const tags = ref(['Vue', 'Nuxt', 'TypeScript'])
</script>

<template>
  <SrTag
    v-for="(tag, i) in tags"
    :key="tag"
    closable
    @close="tags.splice(i, 1)"
  >
    {{ tag }}
  </SrTag>
</template>

胶囊形与描边

胶囊无描边胶囊 + 主要

<SrTag round>胶囊</SrTag>
<SrTag :bordered="false" variant="primary">无描边</SrTag>

带前缀

prefix 插槽用于放一个小图标或状态点。

运行中 待审核

<SrTag variant="success">
  <template #prefix><span class="dot" /></template>
  运行中
</SrTag>

Props

名称	类型	默认值	说明
variant	'default' | 'primary' | 'success' | 'warning' | 'danger'	'default'	语义变体
size	'sm' | 'md'	'md'	尺寸
closable	boolean	false	是否显示关闭按钮
bordered	boolean	true	是否显示描边
round	boolean	false	是否胶囊形

插槽

名称	说明
default	标签文本
prefix	文本前的内容（图标、状态点）

事件

事件	说明
close	点击关闭按钮时触发；标签不会自动移除，由宿主决定

无障碍

• 关闭按钮带 aria-label="移除"，且包含标签文本（如「移除 Vue」）—— 一组标签里若每个关闭按钮都只叫「关闭」，读屏用户无法区分它们
• 关闭按钮可通过键盘聚焦，不是只有鼠标能点