Tag 标签

Tag 用于标记和选择。VISTA B 直接使用 Element Plus 的 el-tag 与 el-check-tag，标签颜色沿用组件库状态色，常用于人员角色、状态、筛选条件和可关闭标记。

基础用法

通过 type 设置标签类型，也可以通过 color 自定义背景色。

Tag 1Tag 2Tag 3Tag 4Tag 5 Custom

<el-tag type="primary">Tag 1</el-tag>
<el-tag type="success">Tag 2</el-tag>
<el-tag type="info">Tag 3</el-tag>
<el-tag type="warning">Tag 4</el-tag>
<el-tag type="danger">Tag 5</el-tag>
<el-tag color="#f3fbfc">Custom</el-tag>

可移除标签

设置 closable 后，标签右侧会显示关闭按钮。关闭时会触发 close 事件；如需关闭默认过渡动画，可以设置 disable-transitions。

Tag 1Tag 2Tag 3Tag 4Tag 5

<el-tag
  v-for="tag in tags"
  :key="tag.label"
  :type="tag.type"
  closable
  @close="closeTag(tag)"
>
  {{ tag.label }}
</el-tag>

动态编辑标签

动态编辑标签通常通过 close 事件删除已有标签，并在输入确认后追加新标签。

项目管理业主资料已签约

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

const inputValue = ref('')
const dynamicTags = ref(['Tag 1', 'Tag 2', 'Tag 3'])
const inputVisible = ref(false)
const inputRef = ref()

const removeTag = (tag) => {
  dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1)
}

const showInput = () => {
  inputVisible.value = true
  nextTick(() => inputRef.value?.focus?.())
}

const confirmInput = () => {
  if (inputValue.value) {
    dynamicTags.value.push(inputValue.value)
  }
  inputVisible.value = false
  inputValue.value = ''
}
</script>

不同尺寸

Tag 支持 large、默认和 small 三种尺寸，用于适配不同密度的页面。

LargeDefaultSmall

<el-tag size="large">Large</el-tag>
<el-tag>Default</el-tag>
<el-tag size="small">Small</el-tag>

主题

通过 effect 设置主题，支持 dark、light 和 plain，默认值为 light。

DarkTag 1Tag 2Tag 3Tag 4Tag 5

LightTag 1Tag 2Tag 3Tag 4Tag 5

PlainTag 1Tag 2Tag 3Tag 4Tag 5

<el-tag type="primary" effect="dark">Tag 1</el-tag>
<el-tag type="primary" effect="light">Tag 1</el-tag>
<el-tag type="primary" effect="plain">Tag 1</el-tag>

圆形标签

设置 round 后，标签会显示为胶囊形，适合状态筛选和轻量分类。

Tag 1Tag 2Tag 3Tag 4Tag 5

Tag 1Tag 2Tag 3Tag 4Tag 5

Tag 1Tag 2Tag 3Tag 4Tag 5

<el-tag type="primary" round>Tag 1</el-tag>
<el-tag type="success" effect="plain" round>Tag 2</el-tag>

可选中的标签

需要标签具备选中状态时，使用 el-check-tag。它支持 checked / v-model:checked、disabled 和 type。

CheckedToggle meDisabled

待跟进已签约待报价有风险已逾期

<el-check-tag checked>Checked</el-check-tag>
<el-check-tag v-model:checked="checked">Toggle me</el-check-tag>
<el-check-tag disabled>Disabled</el-check-tag>
<el-check-tag v-model:checked="checked" type="success">Tag 2</el-check-tag>

典型场景

灰色标签适合表示工作人员、来源等辅助信息；彩色标签适合区分状态、风险和优先级。

客户跟进

设计师已签约待复尺

项目状态

进行中高风险门店

<el-tag type="info" effect="plain">设计师</el-tag>
<el-tag type="success">已签约</el-tag>
<el-tag type="danger" effect="plain" round>高风险</el-tag>

API

Tag 属性

属性	说明	类型	默认值
type	Tag 类型	primary / success / info / warning / danger	primary
closable	是否可关闭	boolean	false
disable-transitions	是否禁用渐变动画	boolean	false
hit	是否有边框描边	boolean	false
color	背景色	string	-
size	Tag 尺寸	large / default / small	-
effect	Tag 主题	dark / light / plain	light
round	是否为圆形标签	boolean	false

Tag 事件

事件	说明	类型
click	点击 Tag 时触发	(event: MouseEvent) => void
close	关闭 Tag 时触发	(event: MouseEvent) => void

Tag 插槽

插槽	说明
default	自定义默认内容

CheckTag 属性

属性	说明	类型	默认值
checked / v-model:checked	是否选中	boolean	false
disabled	是否禁用	boolean	false
type	CheckTag 类型	primary / success / info / warning / danger	primary

CheckTag 事件

事件	说明	类型
change	点击 CheckTag 且选中状态变化时触发	(checked: boolean) => void

CheckTag 插槽

插槽	说明
default	自定义默认内容

使用提醒

• 角色、人员、来源等辅助信息优先使用 info 或 plain，避免状态色过多造成误读。
• 表达风险、异常、警告时使用 warning 或 danger，并保持页面内语义一致。
• 需要可选择状态时使用 el-check-tag，不要用普通 el-tag 手动模拟选中态。