Tag 标签 - Vant 4
Tag 标签
介绍
🏷️ 标签组件 - 小巧精致的信息标记工具！就像给内容贴上彩色便签一样，用于标记关键词、分类信息和概括主要内容。无论是状态标识、类型分类还是重要提醒，Tag 组件都能让你的界面信息更加清晰有序！ ✨
引入
通过以下方式来全局注册组件，更多注册方式请参考组件注册。
js
import { createApp } from'vue'; import { Tag } from'vant'; const app = createApp(); app.use(Tag);代码演示
基础用法
🎨 多彩标签展示 - 通过 type 属性轻松控制标签颜色，就像调色板一样丰富多彩！支持默认、主要、成功、危险、警告等多种类型，让每个标签都有自己的"性格色彩"。
html
<template>
<div class="demo-tag">
<van-tag>默认标签</van-tag>
<van-tag type="primary">主要标签</van-tag>
<van-tag type="success">成功标签</van-tag>
<van-tag type="danger">危险标签</van-tag>
<van-tag type="warning">警告标签</van-tag>
</div>
</template>
<style>
.demo-tag .van-tag {
margin-right: 8px;
}
</style>空心样式
🔲 清新空心设计 - 设置 plain 属性打造空心样式，就像透明的边框一样清爽！保留边框颜色，内部透明，让标签更加轻盈优雅。
html
<template>
<div class="demo-tag">
<van-tag plain>空心标签</van-tag>
<van-tag plain type="primary">主要空心</van-tag>
<van-tag plain type="success">成功空心</van-tag>
<van-tag plain type="danger">危险空心</van-tag>
<van-tag plain type="warning">警告空心</van-tag>
</div>
</template>
<style>
.demo-tag .van-tag {
margin-right: 8px;
}
</style>圆角样式
🔘 圆润可爱风格 - 通过 round 属性设置为圆角样式，让标签变得圆润可爱，就像小药丸一样萌萌哒！
html
<template>
<div class="demo-tag">
<van-tag round>圆角标签</van-tag>
<van-tag round type="primary">主要圆角</van-tag>
<van-tag round type="success">成功圆角</van-tag>
<van-tag round type="danger">危险圆角</van-tag>
<van-tag round type="warning">警告圆角</van-tag>
</div>
</template>
<style>
.demo-tag .van-tag {
margin-right: 8px;
}
</style>标记样式
🏷️ 书签标记风格 - 通过 mark 属性设置为标记样式（半圆角），就像书签一样的独特造型，让标签更有辨识度！
html
<template>
<div class="demo-tag">
<van-tag mark>标记标签</van-tag>
<van-tag mark type="primary">主要标记</van-tag>
<van-tag mark type="success">成功标记</van-tag>
<van-tag mark type="danger">危险标记</van-tag>
<van-tag mark type="warning">警告标记</van-tag>
</div>
</template>
<style>
.demo-tag .van-tag {
margin-right: 8px;
}
</style>可关闭标签
❌ 智能关闭功能 - 添加 closeable 属性让标签变得可关闭，就像便签纸一样可以随时撕掉！关闭时会触发 close 事件，你可以在事件中执行隐藏标签的逻辑，实现动态管理。
html
<template>
<div class="demo-tag">
<van-tag v-if="show.tag1" closeable @close="show.tag1 = false">
可关闭标签
</van-tag>
<van-tag v-if="show.tag2" closeable type="primary" @close="show.tag2 = false">
主要标签
</van-tag>
<van-tag v-if="show.tag3" closeable type="success" @close="show.tag3 = false">
成功标签
</van-tag>
</div>
</template>
<script>
import { reactive } from 'vue';
export default {
setup() {
const show = reactive({
tag1: true,
tag2: true,
tag3: true,
});
return {
show,
};
},
};
</script>
<style>
.demo-tag .van-tag {
margin-right: 8px;
}
</style>标签大小
📏 灵活尺寸选择 - 通过 size 属性调整标签大小，就像衣服的尺码一样！支持大、中、小三种尺寸，满足不同场景的展示需求。
html
<template>
<div class="demo-tag">
<van-tag size="large">大号标签</van-tag>
<van-tag size="medium">中号标签</van-tag>
<van-tag>小号标签</van-tag>
</div>
</template>
<style>
.demo-tag .van-tag {
margin-right: 8px;
}
</style>自定义颜色
🌈 个性色彩定制 - 通过 color 和 text-color 属性自由设置标签颜色，就像调色师一样创造独特的色彩搭配！让你的标签拥有专属的视觉风格。
html
<template>
<div class="demo-tag">
<van-tag color="#7232dd">紫色标签</van-tag>
<van-tag color="#ffe1e1" text-color="#ad0000">浅红标签</van-tag>
<van-tag color="#7232dd" plain>紫色空心</van-tag>
<van-tag color="linear-gradient(to right, #ff6034, #ee0a24)" text-color="#fff">
渐变标签
</van-tag>
</div>
</template>
<style>
.demo-tag .van-tag {
margin-right: 8px;
}
</style>API
Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| type | 🎨 标签类型，可选值为 primary（主要）success（成功）danger（危险）warning（警告） | string | default |
| size | 📏 标签大小，可选值为 large（大号）medium（中号） | string | - |
| color | 🌈 自定义标签背景颜色，支持任意颜色值 | string | - |
| show | 👁️ 是否显示标签，控制标签的显示隐藏 | boolean | true |
| plain | 🔲 是否为空心样式，显示边框但背景透明 | boolean | false |
| round | 🔘 是否为圆角样式，让标签变得圆润可爱 | boolean | false |
| mark | 🏷️ 是否为标记样式，半圆角书签造型 | boolean | false |
| text-color | ✏️ 文本颜色，优先级高于 color 属性 | string | white |
| closeable | ❌ 是否为可关闭标签，显示关闭按钮 | boolean | false |
Slots
| 名称 | 说明 |
|---|---|
| default | 📝 标签显示内容，可以是文字、图标或其他元素 |
Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| click | 👆 点击标签时触发，用于处理标签点击事件 | event: MouseEvent |
| close | ❌ 关闭标签时触发，用于处理标签关闭逻辑 | event: MouseEvent |
类型定义
📘 TypeScript 类型支持 - 组件导出以下类型定义，让你的代码更加类型安全：
ts
import type { TagSize, TagType, TagProps } from 'vant';主题定制
样式变量
🎨 个性化样式定制 - 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。
| 名称 | 默认值 | 描述 |
|---|---|---|
| --van-tag-padding | 0 var(--van-padding-base) | 📦 标签内边距 |
| --van-tag-text-color | var(--van-white) | ✏️ 标签文字颜色 |
| --van-tag-font-size | var(--van-font-size-sm) | 🔤 标签字体大小 |
| --van-tag-radius | 2px | 🔘 标签圆角大小 |
| --van-tag-line-height | 16px | 📏 标签行高 |
| --van-tag-medium-padding | 2px 6px | 📦 中号标签内边距 |
| --van-tag-large-padding | var(--van-padding-base) var(--van-padding-xs) | 📦 大号标签内边距 |
| --van-tag-large-radius | var(--van-radius-md) | 🔘 大号标签圆角 |
| --van-tag-large-font-size | var(--van-font-size-md) | 🔤 大号标签字体大小 |
| --van-tag-round-radius | var(--van-radius-max) | 🔘 圆角标签圆角大小 |
| --van-tag-danger-color | var(--van-danger-color) | 🔴 危险标签颜色 |
| --van-tag-primary-color | var(--van-primary-color) | 🔵 主要标签颜色 |
| --van-tag-success-color | var(--van-success-color) | 🟢 成功标签颜色 |
| --van-tag-warning-color | var(--van-warning-color) | 🟡 警告标签颜色 |
| --van-tag-default-color | var(--van-gray-6) | ⚪ 默认标签颜色 |
| --van-tag-plain-background | var(--van-background-2) | 🔲 空心标签背景色 |
相关文档
展示组件 📋
- Badge 徽标 - 数字徽标组件，用于显示数字或状态
- NoticeBar 通知栏 - 消息通知栏，用于展示重要信息
- Progress 进度条 - 进度展示组件，显示任务完成度
反馈组件 💬
- Toast 轻提示 - 轻量级提示信息，简短反馈
- Dialog 弹出框 - 模态对话框，重要信息确认
- Loading 加载 - 加载状态提示，等待反馈
表单组件 📝
工具组件 🔧
- ConfigProvider 全局配置 - 全局配置提供者，统一主题定制