主题
Badge 徽章
展示数量、短文本或圆点，适合提示未读消息等状态。
支持平台
以下为官网文档所列的平台支持情况，具体功能及版本限制请参见本页的平台说明。
| App-vue | App-nvue | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 | H5 | PC | 快手小程序 | 钉钉小程序 |
|---|---|---|---|---|---|---|---|---|---|---|
| ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
基础用法
vue
<!-- 显示数量 -->
<fui-badge :value="12" :max="99"></fui-badge>
<!-- 显示圆点 -->
<fui-badge dot></fui-badge>属性
| 属性 | 类型 | 说明 | 默认值 |
|---|---|---|---|
| value | Number、String | 徽章内容 | 空字符串 |
| max | Number、String | 数字上限；超过后显示上限和加号，-1 表示不限制 | -1 |
| type | String | 背景类型：primary、success、warning、danger、purple、white | primary |
| background | String | 自定义背景色，设置后优先于 type | 空字符串 |
| color | String | 文字颜色 | #FFFFFF |
| dot | Boolean | 是否显示圆点 | false |
| marginTop | Number、String | 上外边距，单位 rpx | 0 |
| marginLeft | Number、String | 左外边距，单位 rpx | 0 |
| marginRight | Number、String | 右外边距，单位 rpx | 0 |
| absolute | Boolean | 是否启用绝对定位 | false |
| top | String | 绝对定位时的顶部偏移 | -8rpx |
| right | String | 绝对定位时的右侧偏移 | -18rpx |
| scaleRatio | Number | 显示缩放比例 | 1 |
事件
| 事件 | 说明 | 回调参数 |
|---|---|---|
| click | 点击徽章 | 无 |
平台说明
nvue 中类型背景色读取全局颜色配置，非 nvue 平台使用对应 CSS 样式；缩放在不同平台分别使用 transform 和 zoom。
插槽
| 插槽 | 说明 |
|---|---|
| — | 官网未列出该组件的插槽 |