该组件一般用于图标右上角显示未读的消息数量，提示用户点击，有圆点和圆包含文字两种形式。
#平台差异说明
| App（vue） | App（nvue） | H5 | 小程序 |
| √ | √ | √ | √ |
#基本使用
- 通过
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>
copy
#设置徽标的类型为一个圆点
通过isDot参数设置，该形式组件没有内容，只显示一个圆点
<u-badge :isDot="true" type="success"></u-badge>
copy
#设置数字的显示方式 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>
