# Badge 徽标 ### 介绍出现在图标或文字右上角的红色圆点、数字或者文字，表示有新内容或者待处理的信息。 ### 安装 ```javascript import { createApp } from 'vue'; // vue import { Badge } from '@nutui/nutui'; // taro import { Badge } from '@nutui/nutui-taro'; const app = createApp(); app.use(Badge); ``` ### 代码实例 ### 基本用法 ```html

``` ### 最大值 ```html

``` ### 自定义颜色 ```html

``` ### 自定义徽标内容 ```html

``` ### 自定义位置 ```html

``` ### 独立展示 ```html

``` ### Prop | 字段 | 说明 | 类型 | 默认值 | |---------|--------------------------------------------|---------|-----------| | value | 显示的内容 | String | - | | max | value 为数值时，最大值 | Number | `10000` | | z-index | 徽标的 z-index 值 | Number | `10` | | dot | 是否为小点 | Boolean | `false` | | hidden | 是否隐藏 | Boolean | `false` | | top | 上下偏移量，支持单位设置，可设置为：5px 等 | Number | `0` | | right | 左右偏移量，支持单位设置，可设置为：5px 等 | Number | `0` | | color | 徽标背景颜色 | String | `#fa2c19` | ### Slots | 名称 | 说明 | |---------|--------------| | default | 徽标包裹的子元素 | | icons | 徽标自定义 |