Badge 徽标
该组件一般用于图标右上角显示未读的消息数量,提示用户点击,有圆点和圆包含文字两种形式。
平台
App | 小程序 | H5 |
---|---|---|
√ | √ | √ |
属性
属性名 | 类型 | 默认值 | 说明 | 平台 |
---|---|---|---|---|
type | String | danger | primary,danger,warning,success,info | All |
isDot | Boolean | false | 是否是圆点 | All |
num | Number,String | null | 显示的数值内容 | All |
color | String | null | 文字颜色 | All |
numType | String | overflow | 数字显示的格式,overflow、ellipsis、abbr abbr,需要npm install numeral--save http://numeraljs.com/ main.js中挂载CookUni({numeral}) | All |
maxNum | Number,String | 99 | 显示的最大值 | All |
showZero | Boolean | false | 当数值为0时,是否展示Badge | All |
bgIsHorn | Boolean | false | 形状左下角为直角 | All |
plaintext | Boolean | false | 无背景的纯文字 | All |
abs | Boolean | false | 组件是否绝对定位,为true时,offset参数才有效 | All |
offset | Array,String | null | 位置偏移,格式为[top,right] 为string时,用“,”号分隔:“top,right” | All |
cClass | String,Array,Object | null | 组件类 | All |
cStyle | String,Array,Object | null | 组件样式 | All |
margin | String,Number,Array | null | 外边距 | All |
padding | String,Number,Array | null | 内边距 | All |
bgColor | String | null | 背景色,支持c-bg- 开头的背景色类 | All |
示例
vue
<template>
<c-badge type="danger" num="10" />
</template>
1
2
3
2
3