徽标 Badge
- 一个基础的徽标组件
- 支持圆点模式
- 支持
overflow模式 - 支持
ellipsis模式 - 支持
limit模式
插件市场地址
https://ext.dcloud.net.cn/plugin?name=pure-badge
基础使用
通过 value 属性设置显示内容。
vue
<pure-badge value="168"></pure-badge>
<pure-badge value="哈哈"></pure-badge>圆点模式
通过将属性 mode 设置为 dot 实现显示为圆点模式。
html
<pure-badge value="168" mode="dot"></pure-badge>overflow 模式
- 通过将属性
mode设置为overflow实现显示为overflow模式 - 通过
max属性设置overflow模式的最大值 - 通过
overflowSuffix属性设置overflow模式显示的后缀，默认为加号+ overflow模式的显示规则为：当value的值大于max的值时显示为max + overflowSuffix，否则显示原值
vue
<pure-badge value="68" mode="overflow"></pure-badge>
<pure-badge value="99" mode="overflow"></pure-badge>
<pure-badge value="158" mode="overflow"></pure-badge>ellipsis 模式
- 通过将属性
mode设置为ellipsis实现显示为ellipsis模式 - 通过
max属性设置ellipsis模式的最大值 - 通过
ellipsisSuffix属性设置ellipsis模式显示的后缀，默认为省略号... ellipsis模式的显示规则为：当value的值大于max的值时显示为max + ellipsisSuffix，否则显示原值
vue
<pure-badge value="68" mode="ellipsis"></pure-badge>
<pure-badge value="99" mode="ellipsis"></pure-badge>
<pure-badge value="158" mode="ellipsis"></pure-badge>limit 模式
- 通过将属性
mode设置为limit实现显示为limit模式 - 通过
limitValue属性设置limit模式的分割值，默认为一千1000 - 通过
limitSuffix属性设置limit模式显示的后缀，默认为千k - 通过
decimalLength属性设置limit模式显示值保留的小数点位数，默认两位 limit模式的显示规则为：当value的值大于limitValue的值时显示为(value / limitValue).toFixed(decimalLength) + limitSuffix，否则显示原值
vue
<pure-badge value="68" mode="limit"></pure-badge>
<pure-badge value="99" mode="limit"></pure-badge>
<pure-badge value="999" mode="limit"></pure-badge>
<pure-badge value="1000" mode="limit"></pure-badge>
<pure-badge value="1080" mode="limit"></pure-badge>
<pure-badge value="1688" mode="limit"></pure-badge>
<pure-badge value="25680" mode="limit"></pure-badge>主题
通过添加辅助类 pure-badge-{主题名称} 即可使用。
提示
使用辅助类时，如果项目设置了 mergeVirtualHostAttributes(合并小程序组件虚拟节点外层属性)，则可以直接把辅助类名添加到组件上，否则，需将辅助类名添加到外层元素上。
html
<view class="pure-badge-primary">
<pure-badge value="168"></pure-badge>
</view>
<view class="pure-badge-success">
<pure-badge value="哈哈"></pure-badge>
</view>
<view class="pure-badge-danger">
<pure-badge value="178"></pure-badge>
</view>
<view class="pure-badge-warning">
<pure-badge value="嘿嘿"></pure-badge>
</view>
<view class="pure-badge-info">
<pure-badge value="98"></pure-badge>
</view>浅色背景
通过添加辅助类 pure-badge-light 即可使用。
提示
使用辅助类时，如果项目设置了 mergeVirtualHostAttributes(合并小程序组件虚拟节点外层属性)，则可以直接把辅助类名添加到组件上，否则，需将辅助类名添加到外层元素上。
html
<view class="pure-badge-primary pure-badge-light">
<pure-badge value="168"></pure-badge>
</view>
<view class="pure-badge-success pure-badge-light">
<pure-badge value="哈哈"></pure-badge>
</view>
<view class="pure-badge-danger pure-badge-light">
<pure-badge value="178"></pure-badge>
</view>
<view class="pure-badge-warning pure-badge-light">
<pure-badge value="嘿嘿"></pure-badge>
</view>
<view class="pure-badge-info pure-badge-light">
<pure-badge value="98"></pure-badge>
</view>边框
通过添加辅助类 pure-badge-border 即可使用。
提示
使用辅助类时，如果项目设置了 mergeVirtualHostAttributes(合并小程序组件虚拟节点外层属性)，则可以直接把辅助类名添加到组件上，否则，需将辅助类名添加到外层元素上。
html
<view class="pure-badge-primary pure-badge-light pure-badge-border">
<pure-badge value="168"></pure-badge>
</view>
<view class="pure-badge-success pure-badge-light pure-badge-border">
<pure-badge value="哈哈"></pure-badge>
</view>
<view class="pure-badge-danger pure-badge-light pure-badge-border">
<pure-badge value="178"></pure-badge>
</view>
<view class="pure-badge-warning pure-badge-light pure-badge-border">
<pure-badge value="嘿嘿"></pure-badge>
</view>
<view class="pure-badge-info pure-badge-light pure-badge-border">
<pure-badge value="98"></pure-badge>
</view>Props
| 属性名 | 说明 | 类型 | 默认值 | 可选值 | 版本 |
|---|---|---|---|---|---|
value | 值 | String | - | - | +1.0.0 |
mode | 显示模式，参考上方说明 | String | - | dot、overflow、ellipsis、limit | +1.0.0 |
max | overflow、ellipsis时的最大值 | [String, Number] | 99 | - | +1.0.0 |
overflowSuffix | overflow 模式后缀 | String | + | - | +1.0.0 |
ellipsisSuffix | ellipsis 模式后缀 | String | ... | - | +1.0.0 |
limitValue | limit 模式的切割值 | [String, Number] | 1000 | - | +1.0.0 |
limitSuffix | limit 模式后缀 | String | k | - | +1.0.0 |
decimalLength | limit 模式下保留的小数位数 | [String, Number] | 2 | - | +1.0.0 |
absolute | 是否开启 absolute 定位 | Boolean | true | false | +1.0.0 |
样式变量
| 变量名 | 默认值 | 版本 |
|---|---|---|
--pure-badge-line-height | 1 | +1.0.0 |
--pure-badge-width | auto | +1.0.0 |
--pure-badge-height | 2em | +1.0.0 |
--pure-badge-padding | 0 12px | +1.0.0 |
--pure-badge-border-radius | 1000px | +1.0.0 |
--pure-badge-display | inline-flex | +1.0.0 |
--pure-badge-flex-direction | row | +1.0.0 |
--pure-badge-align-items | center | +1.0.0 |
--pure-badge-justify-content | center | +1.0.0 |
--pure-badge-font-size | var(--pure-font-size-smaller) | +1.0.0 |
--pure-badge-color | - | +1.0.0 |
--pure-badge-border-width | - | +1.0.0 |
--pure-badge-border-style | solid | +1.0.0 |
--pure-badge-border-color | - | +1.0.0 |
--pure-badge-top | 0 | +1.0.0 |
--pure-badge-right | 0 | +1.0.0 |
--pure-badge-bottom | auto | +1.0.0 |
--pure-badge-left | auto | +1.0.0 |
--pure-badge-z-index | 8 | +1.0.0 |
--pure-badge-overflow | hidden | +1.0.0 |
--pure-badge-transform | - | +1.0.0 |
--pure-badge-background | var(--pure-badge-theme, var(--pure-background-element)) | +1.0.0 |
--pure-badge-background-opacity | - | +1.0.0 |
--pure-badge-dot-size | 10px | +1.0.0 |