Badge 徽标

徽标用于展示角标或小红点，支持数字上限、语义类型、尺寸与位置，可单独使用，也可包裹内容显示在指定角落。

小程序	APP	Web
✓	✓	✓

实例

以下按属性分别说明 mu-badge 的用法，可按需组合。

<template>
  <mu-badge text="5"></mu-badge>
</template>

类型

设置徽标的语义类型，可选 primary、success、warning、error、danger、info。

<mu-badge text="主要" type="primary"></mu-badge>
<mu-badge text="成功" type="success"></mu-badge>
<mu-badge text="警告" type="warning"></mu-badge>
<mu-badge text="错误" type="error"></mu-badge>
<mu-badge text="危险" type="danger"></mu-badge>
<mu-badge text="信息" type="info"></mu-badge>

尺寸

设置徽标尺寸，可选 small、default、large。

<mu-badge size="small" text="small"></mu-badge>
<mu-badge text="default"></mu-badge>
<mu-badge size="large" text="large"></mu-badge>

数字上限

设置数字上限，超过时显示为「上限+」。

<mu-badge text="8"></mu-badge>
<mu-badge text="66"></mu-badge>
<mu-badge text="168" :max="99"></mu-badge>

圆点

显示为圆点，此时 text 内容被忽略。

<mu-badge :dot="true"></mu-badge>

包裹内容

传入默认插槽后，徽标以角标形式叠加在内容角落，position 控制具体位置。

<mu-badge text="5">
  <view class="box"><text class="box-text">消息</text></view>
</mu-badge>
<mu-badge :dot="true">
  <view class="box"><text class="box-text">通知</text></view>
</mu-badge>
<mu-badge text="99+" type="primary" position="left-top">
  <view class="box"><text class="box-text">会话</text></view>
</mu-badge>

显示控制

控制徽标是否显示，设为 false 时无论 dot 或 text 如何都不显示。

<mu-badge :show="show" text="5"></mu-badge>
<mu-switch v-model="show"></mu-switch>

属性

全部属性均可选，未传入时使用默认值；默认值列为 - 表示空字符串。

属性名称	说明	类型	默认值
text	徽标文字内容	string	-
type	徽标语义类型，可选 primary、success、warning、error、danger、info	string	error
size	徽标尺寸，可选 small、default、large	string	default
position	包裹内容时徽标的位置，可选 right-top、left-top	string	right-top
dot	是否显示为圆点	boolean	false
max	数字上限，超过则显示为 max+	number	99
show	是否显示徽标	boolean	true
customClass	自定义根节点类名	string	-
customStyle	自定义根节点样式	any	-

插槽

组件支持以下插槽。

名称	说明
default	被包裹的内容，设置后徽标以角标形式叠加在内容上