Mojo UI

Appearance

Badge 标识 ​

MoBadge 用于展示未读消息、通知数量、状态圆点等提示信息。组件不区分主题色，颜色通过 color 和 textColor 直接控制。

基础用法 ​

Light
Dark
vue
<MoBadge :value="8">
  <MoButton>消息</MoButton>
</MoBadge>

<MoBadge :value="128" :max="99">
  <MoButton>待办</MoButton>
</MoBadge>

圆点形式 ​

Light
Dark
vue
<MoBadge type="dot">
  <MoButton>系统</MoButton>
</MoBadge>

<MoBadge type="dot" color="#0d9488">
  <MoButton>在线</MoButton>
</MoBadge>

自定义颜色 ​

Light
Dark
vue
<MoBadge :value="12" color="#7c3aed" text-color="#ffffff">
  <MoButton>紫色</MoButton>
</MoBadge>

<MoBadge :value="12" color="#f59e0b" text-color="#111827">
  <MoButton>黄色</MoButton>
</MoBadge>

独立显示 ​

Light
Dark
vue
<MoBadge :value="5" />
<MoBadge :value="0" show-zero />
<MoBadge :value="120" :max="99" />
<MoBadge type="dot" />

偏移位置 ​

Light
Dark
vue
<MoBadge :value="6" :offset="[6, -2]">
  <MoButton>右上偏移</MoButton>
</MoBadge>

API ​

参数说明类型默认值
value标识内容string | number""
type标识形式count | dotcount
max数字最大值，超过后显示为 max+number99
showZero数值为 0 时是否显示booleanfalse
hidden是否隐藏标识booleanfalse
color背景色或圆点颜色string#e04472
textColor数字文字颜色string#ffffff
offset标识相对右上角的偏移量 [x, y][number, number][0, 0]

Slots ​

插槽说明
default被标识包裹的内容，不传时会独立显示标识