uv-ui

# Badge 徽标数（数字角标）

✈

组件名：uv-badge

点击下载&安装 (opens new window)

该组件一般用于显示未读的消息或数量提示，可以配合uv-tabs、uv-vtabs等组件使用。有圆点和圆包含文字两种形式，默认error背景色。

# 平台兼容性

App（vue） App（nvue） H5 小程序 VUE2 VUE3
√ √ √ √ √ √

# 基本使用

  • 通过value参数定义徽标内容
  • 通过type设置主题。重申一次，uv-ui中，所有组件的type参数都只有5个固定的可选值，分别是primary(蓝色-主色)，warning(黄色-警告)， error(红色-错误)，success(绿色-成功)，info(灰色-信息)
  • 通过max参数控制最大值，超过最大值会显示 '{max}+'
<template>
	<view style="padding: 20px;">
		<view class="box">
			<uv-badge type="error" max="99" :value="100"></uv-badge>
		</view>
	</view>
</template>
<style lang="scss" scoped>
	.box {
		width: 50px;
		height: 50px;
		background-color: #909193;
	}
</style>

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

通过:isDot="true"属性设置，该形式组件没有内容，只显示一个圆点

<uv-badge :isDot="true" type="success"></uv-badge>

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

  • overflow会根据max字段判断，超出显示${max}+
  • ellipsis会根据max判断，超出直接显示...
  • limit会依据1000作为判断条件，超出1000，显示${value/1000}K，比如2.2k、3.34w，最多保留2位小数
<template>
	<view style="padding: 20px;">
		<view class="box">
			<uv-badge numberType="overflow" type="error" max="99" :value="100"></uv-badge>
		</view>
		<view class="box">
			<uv-badge numberType="ellipsis" type="error" max="99" :value="10000"></uv-badge>
		</view>
		<view class="box">
			<uv-badge numberType="limit" type="error" max="99" :value="100"></uv-badge>
		</view>
	</view>
</template>
<style lang="scss" scoped>
	.box {
		width: 50px;
		height: 50px;
		background-color: #909193;
	}
</style>

# 完整示例

完整示例下载地址

https://ext.dcloud.net.cn/plugin?name=uv-ui (opens new window)

# API

# Badge Props

参数 说明 类型 默认值 可选值
value 展示的数字，大于 max 时显示为 ${max}+；为0且show-zero为false时隐藏 String | Number - -
isDot 不展示数字，只有一个小点 Boolean false true | false
show 组件是否显示 Boolean true true | false
max 最大值，超过最大值会显示 '{max}+' String | Number 99 -
type 主题类型 String error error | warning | success | primary | info
showZero 当数值为 0 时，是否展示 Badge Boolean false true | false
bgColor 背景颜色，优先级比type高。如设置该属性，type参数就会失效 String - -
color 字体颜色 String #ffffff -
shape 徽标形状，circle-四角均为圆角，horn-左下角为直角 String circle circle | horn
numberType 置数字的显示方式，详细见上方文档 String overflow overflow | ellipsis | limit
inverted 是否反转背景和字体颜色 Boolean false true | false
absolute 组件是否绝对定位，为true时，offset参数才有效 Boolean false true | false
offset 设置badge的位置偏移，格式为 [x, y]，也即设置的为top和right的值，absolute为true时有效 Array - -
customStyle 自定义外部样式 Object - -

← CountDown 倒计时 →