Question

Badge 徽标数 平台差异说明

App	H5	微信小程序	支付宝小程序	百度小程序	头条小程序	QQ小程序
√	√	√	√	√	√	√

基本使用

• 通过count参数定义徽标内容
• 通过type设置主题。重申一次，uView中，所有组件的type参数都只有5个固定的可选值，分别是primary(蓝色-主色)，warning(黄色-警告)， error(红色-错误)，success(绿色-成功)，info(灰色-信息)

注意

此组件内部默认为absulote绝对定位，所以需要给badge父组件(元素)设置position: relative相对定位， 再通过调整offset偏移值(数组，两个元素，第一个元素为top值，第二个元素为right值，单位rpx，可为负值，如"[-10, -10]")设置到合适的位置即可。
如果不需要组件内容默认的自动绝对定位，设置absolute参数为false即可。

<u-badge type="error" count="7"></u-badge>

设置徽标的尺寸

size参数默认为default，如果设置为mini，将会得到一个小尺寸的徽标，组件内部通过css的scale属性值进行缩放。

<u-badge size="mini" type="success"></u-badge>

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

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

<u-badge :is-dot="true" type="success"></u-badge>

自定义徽标样式

该组件内部通过一个view元素实现，是一个根元素，依据vue-cli的vue-loader特性，在引用的组件上直接写类名或者内联样式，可以作用于组件内部的 根元素上(微信小程序除外)，所以用户可以在组件引用时自定义修改样式

<u-badge type="green" class="badge"></u-badge>

<style scoped>
	.badge {
		background-color: blue;
		color: white;
	}
</style>

如何让组件中心点与父组件右上角重合

某些特殊的场景下，特别是badge内容值是通过后端获取，长度未知时，会导致最终渲染出来的badge组件的位置与父组件右上角的位置有出入， 为了解决这个问题，uView提供了一个is-center(默认为false)，如果设置为true，offset参数将会失效，同时badge组件的中心点 将会和父组件的右上角重合。

API

Props

参数	说明	类型	默认值	可选值
count	展示的数字，大于 overflowCount 时显示为 ${overflowCount}+，为0且show-zero为false时隐藏	String | Number	-	-
is-dot	不展示数字，只有一个小点	Boolean	false	true
absolute	组件是否绝对定位，为true时，offset参数才有效	Boolean	true	false
overflow-count	展示封顶的数字值	String | Number	99	-
type	使用预设的背景颜色	String	error	success / primary / warning / info
show-zero	当数值为 0 时，是否展示 Badge	Boolean	false	true
size	Badge的尺寸，设为mini会得到小一号的Badge	String	default	mini
offset	设置badge的位置偏移，格式为 [x, y]，也即设置的为top和right的值，单位rpx。absolute为true时有效	Array	[20, 20]	-
color	字体颜色	String	#ffffff	-
bgColor	背景颜色，优先级比type高，如设置，type参数会失效	String	-	-
is-center	组件中心点是否和父组件右上角重合，优先级比offset高，如设置，offset参数会失效	Boolean	false	true