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>
|
2017-06-02 11:43:02 +08:00
|
|
|
<Badge dot :count="count">
|
2017-03-02 12:05:57 +08:00
|
|
|
<a href="#" class="demo-badge"></a>
|
|
|
|
</Badge>
|
2017-06-02 11:43:02 +08:00
|
|
|
<Button @click="setCount">set count</Button>
|
2017-03-02 12:05:57 +08:00
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
|
|
export default {
|
|
|
|
props: {},
|
|
|
|
data () {
|
2017-06-02 11:43:02 +08:00
|
|
|
return {
|
|
|
|
count: 50
|
|
|
|
};
|
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>
|