Badge 标记

在按钮等组件上显示数字或文本状态标记。

基础用法

常见的消息数量显示。

³

⁵⁰

²⁰

通过 value 属性，接收 Number 或 String。

<mist-badge :value="3" class="item">
  <mist-button>消息</mist-button>
</mist-badge>
<mist-badge :value="50"  type="primary" class="item">
  <mist-button>提示</mist-button>
</mist-badge>
<mist-badge :value="20"  type="warning" class="item">
  <mist-button>提示</mist-button>
</mist-badge>
<style>
.item{
  margin-right: 40px;
}
</style>

Expand Copy Copy

标记设置文本内容

除了数字，可以显示文本。

^新消息

^new

向 value 属性，传递 String类型，即使文本。

<mist-badge value="新消息" class="item">
  <mist-button>回复</mist-button>
</mist-badge>
<mist-badge value="new" class="item">
  <mist-button>评论</mist-button>
</mist-badge>
<style>
.item{
  margin-right: 40px;
}
</style>

Expand Copy Copy

最大值

自定义最大值。

⁹⁹⁺

向 max 属性，必须传递 Number 类型，才能生效。

<mist-badge :value="101" :max="99" class="item">
  <mist-button>消息</mist-button>
</mist-badge>

Expand Copy Copy

显示为点形式

常用的红点形式，表示有新的内容。

设置 is-dot 属性，开启，接收一个Boolean。

<mist-badge is-dot>
  <mist-button type="primary">消息</mist-button>
</mist-badge>

Expand Copy Copy