基本使用
- 通过
value参数定义徽标内容 - 通过
type设置主题。重申一次，uView中，所有组件的type参数都只有5个固定的可选值，分别是primary(蓝色-主色)，warning(黄色-警告)，error(红色-错误)，success(绿色-成功)，info(灰色-信息) - 通过
max参数控制最大值，超过最大值会显示 '{max}+'
注意
此组件内部默认为absolute绝对定位，所以需要给badge父组件(元素)设置position: relative相对定位， 再通过调整offset偏移值(数组，两个元素，第一个元素为top值，第二个元素为right值，单位rpx，可为负值，如"[-10, -10]")设置到合适的位置即可。
如果不需要组件内容默认的自动绝对定位，设置absolute参数为false即可。
<template> <view style="padding: 20px;"> <view class="box"> <u-badge :type="type" max="99" :value="value"></u-badge> </view> </view> </template> <script> export default { data() { return { type:"warning", value:100 } } }; </script> <style lang="scss" scoped> .box{ width: 100px; height: 100px; background-color: #909193; border-radius: 15px; } </style>
设置徽标的类型为一个圆点
通过isDot参数设置，该形式组件没有内容，只显示一个圆点
<u-badge :isDot="true" type="success"></u-badge>
#设置数字的显示方式 overflow|ellipsis|limit
- overflow会根据max字段判断，超出显示
${max}+ - ellipsis会根据max判断，超出显示
${max}... - limit会依据1000作为判断条件，超出1000，显示
${value/1000}K，比如2.2k、3.34w，最多保留2位小数
<template> <view style="padding: 20px;"> <view class="box"> <u-badge numberType="overflow" :type="type" max="99" :value="value"></u-badge> </view> <view class="box"> <u-badge numberType="ellipsis" :type="type" max="99" :value="value"></u-badge> </view> <view class="box"> <u-badge numberType="limit" :type="type" max="99" :value="value"></u-badge> </view> </view> </template> <script> export default { data() { return { type:"warning", value:99999 } } }; </script> <style lang="scss" scoped> .box{ width: 100px; height: 100px; background-color: #909193; border-radius: 15px; } </style>
API
#Props
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
| isDot | 不展示数字，只有一个小点 | Boolean | false | true |
| value | 展示的数字，大于 overflowCount 时显示为 ${overflowCount}+，为0且show-zero为false时隐藏 |
String | Number | - | - |
| show | 组件是否显示 | Boolean | true | false |
| max | 最大值，超过最大值会显示 '{max}+' | String | Number | 99 | - |
| type | 主题类型 | String | error | warning / success / primary / info |
| showZero | 当数值为 0 时，是否展示 Badge | Boolean | false | true |
| bgColor | 背景颜色，优先级比type高，如设置，type参数会失效 |
String | - | - |
| color | 字体颜色 | String | #ffffff | - |
| shape | 徽标形状，circle-四角均为圆角，horn-左下角为直角 | String | circle | horn |
| numberType | 置数字的显示方式，详细见上方文档 | String | overflow | ellipsis / limit |
| offset | 设置badge的位置偏移，格式为 [x, y]，也即设置的为top和right的值，absolute为true时有效 |
Array | - | - |
| inverted | 是否反转背景和字体颜色 | Boolean | false | true |
| absolute | 组件是否绝对定位，为true时，offset参数才有效 |
Boolean | false | true |
