ant-design-vue/components/badge/demo/index.vue
2018-01-23 18:55:39 +08:00

135 lines
3.1 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<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>