# 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-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 |