Tag 标签

用于标记和分类的标签组件，支持多种类型、主题和可关闭功能。

基础用法

通过 type 属性设置标签类型。

默认标签主要标签成功标签警告标签危险标签信息标签

<template>
  <ZcTag>默认标签</ZcTag>
  <ZcTag type="primary">主要标签</ZcTag>
  <ZcTag type="success">成功标签</ZcTag>
  <ZcTag type="warning">警告标签</ZcTag>
  <ZcTag type="danger">危险标签</ZcTag>
  <ZcTag type="info">信息标签</ZcTag>
</template>

主题效果

通过 effect 属性设置标签主题，支持 light、dark 和 plain。

浅色主题深色主题朴素主题

<template>
  <ZcTag type="primary">浅色主题</ZcTag>
  <ZcTag type="primary" effect="dark">深色主题</ZcTag>
  <ZcTag type="primary" effect="plain">朴素主题</ZcTag>
</template>

可关闭与圆角

通过 closable 属性显示关闭按钮，round 属性设置圆角样式。

可关闭标签圆角标签圆角可关闭

<template>
  <ZcTag type="primary" closable @close="handleClose">可关闭标签</ZcTag>
  <ZcTag type="success" round>圆角标签</ZcTag>
  <ZcTag type="warning" round closable>圆角可关闭</ZcTag>
</template>

<script setup>
function handleClose(event) {
  console.log('关闭事件', event)
}
</script>

Tag API

Props

参数	说明	类型	默认值
type	标签类型	primary | success | warning | danger | info	info
effect	主题效果	dark | light | plain	light
closable	是否显示关闭按钮	boolean	false
round	是否为圆角标签	boolean	false
hit	是否有边框高亮	boolean	false
disableTransitions	是否禁用过渡动画	boolean	false

Events

事件名	说明	回调参数
close	点击关闭按钮时触发	(event: MouseEvent)
click	点击标签时触发	(event: MouseEvent)

Slots

插槽名	说明
default	标签内容