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 展示的数字样式类