Badge 徽标数

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