# Badge 徽标数

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

# 平台差异说明

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

# 基本使用

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

注意

此组件内部默认为absolute绝对定位,所以需要给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-clivue-loader特性,在引用的组件上直接写类名或者内联样式,可以作用于组件内部的 根元素上(微信小程序除外),所以用户可以在组件引用时自定义修改样式

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

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

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

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

# API

# Props

参数 说明 类型 默认值 可选值
count 展示的数字,大于 overflowCount 时显示为 ${overflowCount}+,为0show-zerofalse时隐藏 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],也即设置的为topright的值,单位rpx。absolutetrue时有效 Array [20, 20] -
color 字体颜色 String #ffffff -
bgColor 背景颜色,优先级比type高,如设置,type参数会失效 String - -
is-center 组件中心点是否和父组件右上角重合,优先级比offset高,如设置,offset参数会失效 Boolean false true