Badge 徽标数

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

平台差异说明

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

基本使用

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

注意

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

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

设置徽标的尺寸

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

  1. <u-badge size="small" type="success"></u-badge>

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

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

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

自定义徽标样式

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

  1. <u-badge type="green" class="badge"></u-badge>
  2. <style scoped>
  3. .badge {
  4. background-color: blue;
  5. color: white;
  6. }
  7. </style>

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

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

API

Props

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