Badge 徽标数 | uView Next - 企业级、高质量、更贴近业务场景的 uniapp ui框架

# Badge 徽标数

该组件一般用于图标右上角显示未读的消息数量，提示用户点击，有圆点和圆包含文字两种形式。

# 基本使用

通过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">
			 <un-badge :type="type" max="99" :value="value"></un-badge>
		</view>
	</view>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const type = ref("warning");
const value = ref(100);

</script>

<style lang="scss" scoped>
	.box{
		width: 100px; 
		height: 100px;
		background-color: #909193;
		border-radius: 15px;
	}
</style>
✅ Copy success!

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

通过isDot参数设置，该形式组件没有内容，只显示一个圆点

<un-badge :isDot="true" type="success"></un-badge>
✅ Copy success!

# 设置数字的显示方式 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">
			 <un-badge numberType="overflow" :type="type" max="99" :value="value"></un-badge>
		</view>
		<view class="box">
			 <un-badge numberType="ellipsis" :type="type" max="99" :value="value"></un-badge>
		</view>
		<view class="box">
			 <un-badge numberType="limit" :type="type" max="99" :value="value"></un-badge>
		</view>
	</view>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const type = ref("warning");
const value = ref(99999);
</script>

<style lang="scss" scoped>
	.box{
		width: 100px; 
		height: 100px;
		background-color: #909193;
		border-radius: 15px;
	}
</style>
✅ Copy success!

# API

# Props

参数	说明	类型	默认值	可选值
isDot	不展示数字，只有一个小点	Boolean	false	true
v-model / modeValue / 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

← Cell 单元格 Tag 标签 →