更新记录

1.0.1（2026-10-12） 下载此版本

• 新增 light Prop，开启后展示同色系浅底色 + 主题色文字（公告/更新/优化等场景）。
• 浅底使用 mix($uni-color-*, $uni-bg-color, 10%) 派生，跟随主题令牌、无硬编码色值。
• Demo 与 README 同步补充轻量风格示例。

平台兼容性

uni-app(3.8.5)

uni-app x(3.8.5)

其他

vant-tag 标签

用于标记和分类的胶囊状标签组件，支持多种类型、尺寸与变体（空心/圆角/标记/可关闭）。

引入

<vant-tag /> 经 easycom 自动注册，无需 import。如需显式引用：

uni_modules/vant-tag/components/vant-tag/vant-tag.vue

代码演示

基础用法

<template>
  <vant-tag type="primary">标签</vant-tag>
</template>

类型

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

轻量风格

<template>
  <vant-tag type="primary" light>公告</vant-tag>
  <vant-tag type="success" light>更新</vant-tag>
  <vant-tag type="warning" light>优化</vant-tag>
</template>

空心 / 圆角 / 标记

<template>
  <vant-tag type="primary" plain>空心</vant-tag>
  <vant-tag type="primary" round>圆角</vant-tag>
  <vant-tag type="danger" mark>标记</vant-tag>
</template>

可关闭

点击右侧关闭按钮会向外 emit close 事件，是否从视图移除由外部决定（数据驱动、零业务耦合）。

<template>
  <vant-tag v-if="show" type="primary" closeable @close="onClose">标签</vant-tag>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const show = ref(true)
const onClose = () => {
  show.value = false
}
</script>

自定义颜色

<template>
  <vant-tag color="#7232dd" text-color="#fff">渐变紫</vant-tag>
</template>

API

Props

Events

Slots

主题定制

颜色、字号、间距、圆角统一使用宿主 uni.scss 的 $uni-* 令牌。覆盖以下变量即可调整全局外观：

• $uni-color-primary / $uni-color-success / $uni-color-warning / $uni-color-error
• $uni-font-size-sm / $uni-font-size-base
• $uni-border-radius-sm / $uni-border-radius-lg

常见问题

• Q：关闭按钮点击后标签没有消失？ A：组件只 emit close 事件，不自带移除逻辑。是否移除由外部通过 v-if 或数据驱动决定，保证组件零业务耦合。
• Q：如何自定义颜色？ A：传 color 覆盖背景、textColor 覆盖文字色，二者优先级高于 type，可不传 type 直接使用。