Badge 徽标数
<u-badge type="error" :absolute="true" :offset="[0,0]" max="99" :value="billAlarm.OrderBillCount">
</u-badge>
通过value参数定义徽标内容
通过type设置主题。重申一次,uView中,所有组件的type参数都只有5个固定的可选值,分别是primary(蓝色-主色),warning(黄色-警告), error(红色-错误),success(绿色-成功),info(灰色-信息)
通过max参数控制最大值,超过最大值会显示 '{max}+'
此组件内部默认为absulote绝对定位,所以需要给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>