Tag 标签

标签用于标注、分类，或表示状态。支持主题色、变体、尺寸、关闭和自定义颜色；YueCheckTag 是可选中的标签，适合多选筛选场景。

完整 API 见 API 文档；设计决策见指南。

基础示例

基础

默认标签

<YueTag>默认标签</YueTag>

主题

主题

默认主要成功警告危险

<YueTag theme="default">默认</YueTag>
<YueTag theme="primary">主要</YueTag>
<YueTag theme="success">成功</YueTag>
<YueTag theme="warning">警告</YueTag>
<YueTag theme="danger">危险</YueTag>

变体

变体（以 primary 为例）

FilledTintOutlineTint-Outline

<YueTag theme="primary" variant="filled">Filled</YueTag>
<YueTag theme="primary" variant="tint">Tint</YueTag>
<YueTag theme="primary" variant="outline">Outline</YueTag>
<YueTag theme="primary" variant="tint-outline">Tint-Outline</YueTag>

主题 × 变体矩阵

5 主题 × 4 变体

defaultdefaultdefaultdefault

primaryprimaryprimaryprimary

successsuccesssuccesssuccess

warningwarningwarningwarning

dangerdangerdangerdanger

<!-- 5 个主题 × 4 个变体 -->
<template v-for="theme in themes" :key="theme">
  <YueTag v-for="variant in variants" :key="variant"
    :theme="theme" :variant="variant">
    {{ theme }}
  </YueTag>
</template>

尺寸

尺寸

小中大

<YueTag size="sm">小</YueTag>
<YueTag size="md">中</YueTag>
<YueTag size="lg">大</YueTag>

形状

形状

方形圆形

<YueTag theme="primary" shape="square">方形</YueTag>
<YueTag theme="primary" shape="round">圆形</YueTag>

可关闭

可关闭

可关闭主要危险

<YueTag closable @close="onClose">可关闭</YueTag>
<YueTag theme="primary" closable @close="onClose">主要</YueTag>
<YueTag theme="danger" closable @close="onClose">危险</YueTag>

禁用

禁用

禁用禁用不可关闭

<YueTag disabled>禁用</YueTag>
<YueTag theme="primary" disabled>禁用</YueTag>
<YueTag closable disabled>不可关闭</YueTag>

可点击（tag="button"）

使用 tag="button" 赋予标签完整的键盘和指针交互语义。监听 @click 在任何标签上都能生效，但当标签触发动作时，<button> 才是语义正确的根元素。

可点击

<YueTag tag="button" theme="primary" @click="onFilter">可点击</YueTag>
<YueTag tag="button" @click="onFilter">默认</YueTag>
<YueTag tag="button" theme="success" @click="onFilter">成功</YueTag>

最大宽度截断

最大宽度截断

这是一段很长的标签文本这是一段很长的标签文本会被截断

<YueTag :max-width="80">这是一段很长的标签文本</YueTag>
<YueTag theme="primary" :max-width="120">这是一段很长的标签文本会被截断</YueTag>

图标插槽

图标

带图标

<YueTag theme="primary">
  <template #icon><IconTag :size="12" /></template>
  带图标
</YueTag>

自定义颜色

传入任意合法 CSS 颜色值，组件根据亮度自动推导文字色和背景色。

自定义颜色

自定义紫色天蓝 Tint琥珀 Outline绿 Tint-Outline

<YueTag color="#7c3aed">自定义紫色</YueTag>
<YueTag color="#0ea5e9" variant="tint">天蓝 Tint</YueTag>
<YueTag color="#f59e0b" variant="outline">琥珀 Outline</YueTag>
<YueTag color="#10b981" variant="tint-outline">绿 Tint-Outline</YueTag>

CheckTag 可选中标签

YueCheckTag 是 role="checkbox" 标签，支持 v-model 控制模式和 defaultChecked 非受控模式。

CheckTag 基础

VueReactAngular（禁用）

<YueCheckTag v-model="selected1">Vue</YueCheckTag>
<YueCheckTag v-model="selected2">React</YueCheckTag>
<YueCheckTag v-model="selected3" disabled>Angular（禁用）</YueCheckTag>

CheckTag 多选筛选组

多选筛选

VueReactSvelteSolid

<YueCheckTag
  v-for="tag in tags"
  :key="tag.value"
  v-model="tag.checked"
  @change="onTagChange"
>{{ tag.label }}</YueCheckTag>

选中态与主题

未选中时是中性 chip；选中后使用 theme 指定的配色（默认 primary）。下面四个是真实渲染的标签，用于验证选中配色随主题变化、hover 只强调已有背景。

primarysuccesswarningdanger

变体与主题矩阵（可交互）

下面每个标签都是真实渲染的：四个变体 × 四个主题。门禁逐项断言浅色与深色下文字对比度 ≥4.5:1，并断言同一变体内四个主题的配色互不相同（主题被忽略就会失败）。

filled

primarysuccesswarningdanger

tint

primarysuccesswarningdanger

outline

primarysuccesswarningdanger

tint-outline

primarysuccesswarningdanger