Badge 标记

Badge 标记

出现在按钮、图标旁的数字或状态标记。

基础用法

展示新消息数量。

隐藏 Badge 评论 评论

<aui-button class="item" @click="toggle">{{status? '显示 Badge' : '隐藏 Badge'}}</aui-button>
<aui-badge :value="12" class="item" :hidden="status">
  <aui-button>评论</aui-button>
</aui-badge>
<span>评论 <aui-badge :value="12" :hidden="status" /></span>
<script>
export default {
  data(){
    return{
      status: false
    }
  },
  methods: {
    toggle(){
      this.status = !this.status
    }
  }
}
</script>
<style scope>
.item {
  margin-right: 40px;
}
</style>

显示代码 复制代码 复制代码

最大值

可自定义最大值。

评论 评论

<aui-badge :value="200" :max="99" class="item">
  <aui-button>评论</aui-button>
</aui-badge>
<span>评论 <aui-badge :value="100" :max="10" /></span>
<style scope>
.item {
  margin-right: 40px;
}
</style>

显示代码 复制代码 复制代码

自定义内容

可以显示数字以外的文本内容。

评论 评论

<aui-badge value="new" class="item">
  <aui-button>评论</aui-button>
</aui-badge>
<span>评论 <aui-badge value="hot" /></span>
<style scope>
.item {
  margin-right: 40px;
}
</style>

显示代码 复制代码 复制代码

小红点

以红点的形式标注需要关注的内容。

评论 评论

除了数字外，设置is-dot属性，它接受一个Boolean。

<aui-badge :is-dot="true" class="item">
  <aui-button>评论</aui-button>
</aui-badge>
<span>评论 <aui-badge :is-dot="true" /></span>
<style scope>
.item {
  margin-right: 40px;
}
</style>

显示代码 复制代码 复制代码

Attributes

参数	说明	类型	可选值	默认值
value	显示值	string / number	—	—
max	最大值，超过最大值会显示 '{max}+'，要求 value 是 Number 类型	number	—	—
is-dot	小圆点	boolean	true / false	false
hidden	隐藏 badge	boolean	true / false	false

Slot

name	说明
default	默认插槽