# Badge 标记
出现在按钮、图标旁的数字或状态标记
# 初始化
单独引入时：在入口js文件处引入
import { Badge } from '@xiaoe/sense'
import '@xiaoe/sense/static/index.css'
Vue.use(Badge)
1
2
3
2
3
# 基本样式
<ss-badge></ss-badge>
<ss-badge type="success"></ss-badge>
<ss-badge type="info"></ss-badge>
<ss-badge type="primary"></ss-badge>
<ss-badge type="warning"></ss-badge>
1
2
3
4
5
2
3
4
5
# 文本样式
<ss-badge text>错误</ss-badge>
<ss-badge type="success" text>正常/成功</ss-badge>
<ss-badge type="info" text>已结束</ss-badge>
<ss-badge type="primary" text>处理中</ss-badge>
<ss-badge type="warning" text>警告</ss-badge>
1
2
3
4
5
2
3
4
5
# 未过99与超过99
<ss-badge :number="66"></ss-badge>
<ss-badge :number="666"></ss-badge>
1
2
2
# 修改最大值为999
<ss-badge :number="66" :maxLength="999"></ss-badge>
<ss-badge :number="666" :maxLength="999"></ss-badge>
<ss-badge :number="6666" :maxLength="999"></ss-badge>
1
2
3
2
3
# 参数
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|---|---|---|---|---|
| type | badge图标类型 | String | — | success,info,primary,warning |
| number | badge图标显示的数字 | Number | — | — |
| maxLength | 设置最大值 | Number | 99 | — |