2017-03-02 12:05:57 +08:00
|
|
|
<style scoped>
|
|
|
|
.demo-badge{
|
|
|
|
width: 42px;
|
|
|
|
height: 42px;
|
|
|
|
background: #eee;
|
|
|
|
border-radius: 6px;
|
|
|
|
display: inline-block;
|
|
|
|
}
|
|
|
|
</style>
|
|
|
|
<style>
|
|
|
|
.demo-badge-alone{
|
|
|
|
background: #5cb85c !important;
|
|
|
|
}
|
|
|
|
</style>
|
|
|
|
<template>
|
|
|
|
<div>
|
2018-06-21 11:34:25 +08:00
|
|
|
<Badge :count="count">
|
2017-03-02 12:05:57 +08:00
|
|
|
<a href="#" class="demo-badge"></a>
|
|
|
|
</Badge>
|
2018-05-19 23:05:17 +08:00
|
|
|
<Badge :count="0" showZero>
|
|
|
|
<a href="#" class="demo-badge"></a>
|
|
|
|
</Badge>
|
2017-06-02 11:43:02 +08:00
|
|
|
<Button @click="setCount">set count</Button>
|
2018-06-21 11:34:25 +08:00
|
|
|
<br><br>
|
|
|
|
<Badge text="hot">
|
|
|
|
<Button type="ghost">Hello</Button>
|
|
|
|
</Badge>
|
2017-03-02 12:05:57 +08:00
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
|
|
export default {
|
|
|
|
props: {},
|
|
|
|
data () {
|
2017-06-02 11:43:02 +08:00
|
|
|
return {
|
2018-06-21 11:34:25 +08:00
|
|
|
count: 5
|
2017-06-02 11:43:02 +08:00
|
|
|
};
|
2017-03-02 12:05:57 +08:00
|
|
|
},
|
2017-06-02 11:43:02 +08:00
|
|
|
methods: {
|
|
|
|
setCount () {
|
|
|
|
this.count = 10;
|
|
|
|
}
|
|
|
|
}
|
2017-03-02 12:05:57 +08:00
|
|
|
};
|
|
|
|
</script>
|