135 lines
3.1 KiB
Vue
135 lines
3.1 KiB
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>
|