Badge 徽标 - Vant 4
Badge 徽标
🏷️ 介绍
徽标组件用于在元素右上角展示数字或小红点，是提醒用户注意的绝佳方式！无论是消息提醒、状态标识还是数量显示，都能轻松胜任。
📦 引入
通过以下方式来全局注册组件，更多注册方式请参考组件注册。
import { createApp } from'vue'; import { Badge } from'vant'; const app = createApp(); app.use(Badge);🎯 代码演示
基础用法
设置 content 属性后，Badge 会在子元素的右上角显示对应的徽标，也可以通过 dot 来显示小红点。简单配置，醒目提醒！
最大值
设置 max 属性后，当 content 的数值超过最大值时，会自动显示为 {max}+。智能处理大数值，保持界面整洁！
自定义颜色
通过 color 属性来设置徽标的颜色。个性化配色，匹配你的设计风格！
自定义徽标内容
通过 content 插槽可以自定义徽标的内容，比如插入一个图标。
.badge-icon { display: block; font-size: 10px; line-height: 16px; }自定义徽标位置
通过 position 属性来设置徽标的位置。
独立展示
当 Badge 没有子元素时，会作为一个独立的元素进行展示。
API
Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| content | 徽标内容（dot 为 fasle 时生效） | *number | string* |
| color | 徽标背景颜色 | string | #ee0a24 |
| dot | 是否展示为小红点 | boolean | false | | max | 最大值，超过最大值会显示 {max}+，仅当 content 为数字时有效 | number | string | - | | offset | 设置徽标的偏移量，数组的两项分别对应水平向右和垂直向下方向的偏移量，默认单位为 px | [number | string, number | string] | - | | show-zero | 当 content 为数字 0 或字符串 '0' 时，是否展示徽标 | boolean | true | | position | 徽标位置，可选值为 top-left``bottom-left``bottom-right | string | top-right |
Slots
| 名称 | 说明 |
|---|---|
| default | 徽标包裹的子元素 |
| content | 自定义徽标内容 |
类型定义
组件导出以下类型定义：
importtype { BadgeProps, BadgePosition } from'vant';主题定制
样式变量
组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。
| 名称 | 默认值 | 描述 |
|---|---|---|
| --van-badge-size | 16px | - |
| --van-badge-color | var(--van-white) | - |
| --van-badge-padding | 0 3px | - |
| --van-badge-font-size | var(--van-font-size-sm) | - |
| --van-badge-font-weight | var(--van-font-bold) | - |
| --van-badge-border-width | var(--van-border-width) | - |
| --van-badge-background | var(--van-danger-color) | - |
| --van-badge-dot-color | var(--van-danger-color) | - |
| --van-badge-dot-size | 8px | - |
| --van-badge-font | -apple-system-font, Helvetica Neue, Arial, sans-serif | - |
📝 总结
Badge 徽标组件是界面中的小小提醒专家！🏷️ 它能在不打扰用户的前提下，巧妙地传达重要信息。无论是消息数量、状态提示还是特殊标记，都能以最直观的方式呈现给用户。
🎯 核心特性：
- 🔴 小红点模式：简洁的状态提醒
- 🔢 数字显示：精确的数量统计
- 🎨 自定义样式：灵活的颜色和位置配置
- 📍 智能定位：四个角落任意选择
- 🎭 内容定制：支持文字、图标等多种内容
- 🔢 智能截断：大数值自动显示为 max+ 格式
从购物车商品数量到未读消息提醒，Badge 让你的应用界面更加生动有趣！