该组件一般用于图标右上角显示未读的消息数量,提示用户点击,有圆点和圆包含文字两种形式。
#平台差异说明
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>