ant-design-vue/components/badge/demo/index.vue

<template>
  <div>
    基本：
    <div>
      <a-badge count=5>
        <a href="#" class="head-example" />
      </a-badge>
      <a-badge count=0 showZero>
        <a href="#" class="head-example" />
      </a-badge>
    </div>
    <br>
    独立使用：
    <div>
      <a-badge count=25 />
      <a-badge count=4 :styles="{backgroundColor: '#fff', color: '#999', boxShadow: '0 0 0 1px #d9d9d9 inset'}" />
      <a-badge count=109 :styles= "{backgroundColor: '#52c41a'} " />
    </div>
    <br>
    封顶数字：
    <div style="margin-top: 10px">
      <a-badge count=99>
        <a href="#" class="head-example" />
      </a-badge>
      <a-badge count=100>
        <a href="#" class="head-example" />
      </a-badge>
      <a-badge count=99 overflowCount=10>
        <a href="#" class="head-example" />
      </a-badge>
      <a-badge count=1000 overflowCount=999>
        <a href="#" class="head-example" />
      </a-badge>
    </div>
    <br>
     讨嫌的小红点：
    <div style="margin-top: 10px">
      <a-badge dot>
        <a-icon type="notification" />
      </a-badge>
      <a-badge dot>
        <a href="#">Link something</a>
      </a-badge>
    </div>
    <br>
    状态点：
    <div>
      <a-badge status="success" />
      <a-badge status="error" />
      <a-badge status="default" />
      <a-badge status="processing" />
      <a-badge :status="currentStatus" />
      <a-button @click="changeStatus">改processing</a-button>
      <br />
      <a-badge status="success" text="Success" />
      <br />
      <a-badge status="error" text="Error" />
      <br />
      <a-badge status="default" text="Default" />
      <br />
      <a-badge status="processing" text="Processing" />
      <br />
      <a-badge status="warning" text="Warning" />
    </div>
    <br />
    动态：
    <div>
      <a-badge :count="count">
        <a href="#" class="head-example" />
      </a-badge>
      <a-button @click="changeMinsValue()">
        <a-icon type="minus" />
      </a-button>
      <a-button @click="changePlusValue(1)">
        <a-icon type="plus" />
      </a-button>
      <br/>
      <a-badge :dot="isShow">
        <a href="#" class="head-example" />
      </a-badge>
      <a-button @click="changeShow()">toggle</a-button>
    </div>
    <br />
  </div>
</template>
<script>
let i = 0
export default {
  data () {
    return {
      currentStatus: 'warning',
      count: 3,
      isShow: true,
    }
  },
  methods: {
    changeStatus () {
      this.currentStatus = 'processing'
    },
    changeMinsValue () {
      i++
      console.dir(i)
      let count = this.count - 1
      if (count < 0) {
        count = 0
      }
      this.count = count
    },
    changePlusValue () {
      // setInterval(() => {
      //   const count = this.count + 1
      //   this.count = count
      // }, 300)
      const count = this.count + 1
      this.count = count
    },
    changeShow () {
      this.isShow = !this.isShow
    },
  },
}
</script>
<style scoped>
  .head-example {
    width: 42px;
    height: 42px;
    border-radius: 4px;
    background: #eee;
    display: inline-block;
  }
  .ant-badge{
    margin-right: 20px;
  }
</style>