Badge 徽章
Badge 徽章,可自定义颜色。
# 支持平台
| App(vue) | App(nvue) | H5 | 小程序 |
|---|---|---|---|
| ✓ | ✓ | ✓ | ✓ |
# 基础使用
通过 value 属性设置展示的文本,type 属性设置 badge 的类型。
<wui-badge value="1"></wui-badge>
<wui-badge type="success" value="2"></wui-badge>
# 显示为圆点
通过 dot 属性设置 badge 是否显示为圆点,为true时value失效。
<wui-badge dot></wui-badge>
<wui-badge type="warning" dot></wui-badge>
# 自定义颜色
通过 background 属性设置badge背景颜色,color 属性设置字体颜色。
<wui-badge value="6" background="#eee" color="#333"></wui-badge>
# Slots
| 插槽名称 | 说明 |
|---|---|
| - | - |
# Props
| 属性名 | 类型 | 说明 | 默认值 | 平台差异说明 |
|---|---|---|---|---|
| value | Number, String | badge显示文本 | - | - |
| max V1.5.0+ | Number, String | 最大值,当值超过max时使用+号代替,仅为数字时有效,-1表示不限制 | -1 | - |
| type | String | 类型,有效值:primary,success,warning,danger,purple,white | primary | - |
| background | String | 背景色,如果设置背景色则type失效 | - | - |
| color | String | 字体颜色 | #FFFFFF | - |
| dot | Boolean | 是否显示为圆点 | false | - |
| marginTop | Number, String | margin-top值,单位rpx | 0 | - |
| marginLeft | Number, String | margin-left值,单位rpx | 0 | - |
| marginRight | Number, String | margin-right值,单位rpx | 0 | - |
| absolute | Boolean | 是否绝对定位 | false | - |
| top | String | top值,absolute为true时生效 | -8rpx | - |
| right | String | right值,absolute为true时生效 | -18rpx | - |
| scaleRatio | Number | 缩放比例 | 1 | - |
提示
注: nvue android端元素默认超出隐藏,绝对定位时Badge请勿超出父级元素,应留出足够的空间。
# Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| @click | 点击badge时触发 | - |