Badge 徽章

图标右上角的圆形徽标数字。

使用指南

在 page.json 中引入组件

  1. {
  2. "navigationBarTitleText": "Badge",
  3. "usingComponents": {
  4. "wux-badge": "../../dist/badge/index"
  5. }
  6. }

示例

  1. <view class="page">
  2. <view class="page__hd">
  3. <view class="page__title">Badge</view>
  4. <view class="page__desc">徽章</view>
  5. </view>
  6. <view class="page__bd">
  7. <view class="example">
  8. <wux-badge dot="{{ true }}">
  9. <view class="example__badge"></view>
  10. </wux-badge>
  11. </view>
  12. <view class="example">
  13. <wux-badge count="0" show-zero="{{ true }}">
  14. <view class="example__badge"></view>
  15. </wux-badge>
  16. </view>
  17. <view class="example">
  18. <wux-badge count="3">
  19. <view class="example__badge"></view>
  20. </wux-badge>
  21. </view>
  22. <view class="example">
  23. <wux-badge count="100">
  24. <view class="example__badge"></view>
  25. </wux-badge>
  26. </view>
  27. <view class="example">
  28. <wux-badge count="9999" overflow-count="1024">
  29. <view class="example__badge"></view>
  30. </wux-badge>
  31. </view>
  32. <view class="example">
  33. <wux-badge count="66" />
  34. </view>
  35. <view class="example">
  36. <wux-badge count="88" wux-class-badge="bg-green" />
  37. </view>
  38. <view class="example">
  39. <wux-badge status="success" />
  40. </view>
  41. <view class="example">
  42. <wux-badge status="error" />
  43. </view>
  44. <view class="example">
  45. <wux-badge status="default" />
  46. </view>
  47. <view class="example">
  48. <wux-badge status="processing" />
  49. </view>
  50. <view class="example">
  51. <wux-badge status="warning" text="Warning" />
  52. </view>
  53. </view>
  54. </view>

视频演示

Badge

API

Badge props

参数 类型 描述 默认值
prefixCls string 自定义类名前缀 wux-badge
count number 展示的数字,大于 overflowCount 时显示为 ${overflowCount}+,为 0 时隐藏 0
overflowCount number 展示封顶的数字值 99
dot boolean 不展示数字,只有一个小红点 false
showZero boolean 当数值为 0 时,是否展示 Badge false
status string 设置 Badge 为状态点,可选值为 success、processing、default、error、warning -
text string 在设置了 status 的前提下有效,设置状态点的文本 -

Badge slot

名称 描述
- 自定义内容

Badge externalClasses

名称 描述
wux-class 根节点样式类
wux-badge-class 展示的数字样式类