vue-mooc

Badge 标记

用法

基础用法

通过传递value值，可以是数字，也可以是自定义的字符串，来显示消息的内容。

消息
10
消息
90
消息
new
消息
hot
<badge :value="10">
  <div class="badge-btn">消息</div>
</badge>
<badge :value="90">
  <div class="badge-btn">消息</div>
</badge>
<badge value="new">
  <div class="badge-btn">消息</div>
</badge>
<badge value="hot">
  <div class="badge-btn">消息</div>
</badge>

最大值

可以通过传递max，来限制消息的数量。

消息
10
消息
10+
消息
99+
<!-- 正常 -->
<badge :value="10">
  <div class="badge-btn">消息</div>
</badge>
<!-- 最大值10 -->
<badge :value="11" :max="10">
  <div class="badge-btn">消息</div>
</badge>
<!-- 最大值99 -->
<badge :value="100" :max="99">
  <div class="badge-btn">消息</div>
</badge>

小原点

可以通过传递is-dot为true，来控制显示小圆点。

消息
10
消息
<!-- 正常 -->
<badge :value="10">
  <div class="badge-btn">消息</div>
</badge>
<!-- 圆点显示 -->
<badge :value="10" :is-dot="true">
  <div class="badge-btn">消息</div>
</badge>

消息的类型

通过传递type，其中type必须是基础类型primary,success,warning,info,danger其中之一，来控制显示不同类型的消息。

消息
99+
消息
99+
消息
99+
消息
99+
消息
99+
<!-- 默认类型 -->
<badge :value="100" :max="99" type="danger">
  <div class="badge-btn">消息</div>
</badge>
<!-- 正常 -->
<badge :value="100" :max="99" type="primary">
  <div class="badge-btn">消息</div>
</badge>
<!-- 成功 -->
<badge :value="100" :max="99" type="success">
  <div class="badge-btn">消息</div>
</badge>
<!-- 警告 -->
<badge :value="100" :max="99" type="warning">
  <div class="badge-btn">消息</div>
</badge>
<!-- 内容提示 -->
<badge :value="100" :max="99" type="info">
  <div class="badge-btn">消息</div>
</badge>

是有隐藏

可以通过传递hidden为true，来控制是否显示消息内容。

消息
10
消息
<!-- 正常 -->
<badge :value="10">
  <div class="badge-btn">消息</div>
</badge>
<!-- 隐藏消息 -->
<badge :value="10" :hidden="true">
  <div class="badge-btn">消息</div>
</badge>

属性

属性名称 类型 默认值 说明
value [Number, String] 无默认值 消息的内容
max Number 无默认值 当消息超过max值时，以{max}+的形式显示
is-dot Boolean false 是否小圆点显示
hidden Boolean false 消息提示是否隐藏
type String danger primary,success,warning,info,danger其中之一
最后更新时间: 9/17/2019, 10:55:33 PM

← Switch 开关 →