iview/examples/routers/badge.vue

44 lines
921 B
Vue
Raw Normal View History

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>