uniapp中uview组件库中的Badge 徽标数 使用

目录

基本使用

设置徽标的类型为一个圆点

#设置数字的显示方式 overflow|ellipsis|limit

API

#Props

基本使用

• 通过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