Tag 标签

微型标记与状态标签组件，用于标记分类、筛选状态、展示操作标记及关键属性高亮。支持 5 种语义类型、朴素边框、全圆胶囊形状、自定义背景/文字色彩以及移除事件。

---

代码示例

1. 语义类型 (Type)

提供 primary、success、warning、error、default 五种通用主题色彩。

<template>
  <mu-tag type="primary">主要 Tag</mu-tag>
  <mu-tag type="success">成功 Tag</mu-tag>
  <mu-tag type="warning">警告 Tag</mu-tag>
  <mu-tag type="error">危险 Tag</mu-tag>
  <mu-tag type="default">默认 Tag</mu-tag>
</template>

---

2. 尺寸规格 (Size)

提供 medium（标准 6rpx 20rpx）与 small（小号 4rpx 14rpx）两种尺寸形态。

<template>
  <mu-tag size="medium" type="primary">Medium 标准</mu-tag>
  <mu-tag size="small" type="primary">Small 小号</mu-tag>
  <mu-tag size="medium" type="success">Medium 成功</mu-tag>
  <mu-tag size="small" type="success">Small 成功</mu-tag>
</template>

---

3. 朴素与全圆胶囊形态 (Plain & Round)

设置 plain 开启微透明背景与边框镂空形态；设置 round 开启全圆半角胶囊弧度。

<template>
  <mu-tag type="primary" plain>朴素主要</mu-tag>
  <mu-tag type="success" plain>朴素成功</mu-tag>
  <mu-tag type="warning" round>胶囊警告</mu-tag>
  <mu-tag type="error" plain round>朴素胶囊</mu-tag>
</template>

---

4. 自定义配色 (Custom Colors)

通过 background 自定义背景色，通过 color 自定义文字颜色。

<template>
  <mu-tag background="#8B5CF6" color="#FFFFFF">魅紫风尚</mu-tag>
  <mu-tag background="#EC4899" color="#FFFFFF">粉红浪漫</mu-tag>
  <mu-tag background="#F59E0B" color="#FFFFFF">暖金流光</mu-tag>
  <mu-tag background="rgba(99, 102, 241, 0.1)" color="#6366F1">浅紫软核</mu-tag>
</template>

---

5. 可关闭与移除标记 (Closable)

开启 closable 显示右侧 ✕ 关闭按钮，触发 @close 事件完成动态移除逻辑。

<template>
  <mu-tag
    v-for="(tag, index) in tags"
    :key="tag.id"
    :type="tag.type"
    closable
    @close="handleClose(index)"
  >
    {{ tag.name }}
  </mu-tag>
</template>

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

const tags = ref([
  { id: 1, name: '前端开发', type: 'primary' },
  { id: 2, name: 'UI设计', type: 'success' },
  { id: 3, name: '小程序', type: 'warning' }
])

const handleClose = (index) => {
  tags.value.splice(index, 1)
}
</script>

---

API 属性说明 (Props)

参数名	说明	类型	可选值	默认值
type	标签语义类型	String	primary / success / warning / error / default	'default'
size	标签尺寸规范	String	medium / small	'medium'
plain	是否为朴素微镂空样式	Boolean	true / false	false
round	是否为全圆胶囊弧度	Boolean	true / false	false
closable	是否在右侧显示可关闭 ✕ 图标	Boolean	true / false	false
background	自定义标签背景颜色	String	-	''
color	自定义标签文本颜色	String	-	''

---

插槽说明 (Slots)

插槽名	说明
default	标签内部展示的文本或自定义图标元素

---

事件说明 (Events)

事件名	说明	回调参数
click	点击标签时触发	(event: Event)
close	点击右侧 ✕ 关闭图标时触发	(event: Event)