Commit 0ff50807335172b77f99db6d57cbb31f00337e41
Committed by
GitHub
Merge pull request #3654 from xiaofengsha/pr008
Badge 组件增加 showZero 属性
Showing
2 changed files
with
16 additions
and
3 deletions
Show diff stats
examples/routers/badge.vue
| @@ -17,7 +17,11 @@ | @@ -17,7 +17,11 @@ | ||
| 17 | <Badge dot :count="count"> | 17 | <Badge dot :count="count"> |
| 18 | <a href="#" class="demo-badge"></a> | 18 | <a href="#" class="demo-badge"></a> |
| 19 | </Badge> | 19 | </Badge> |
| 20 | + <Badge :count="0" showZero> | ||
| 21 | + <a href="#" class="demo-badge"></a> | ||
| 22 | + </Badge> | ||
| 20 | <Button @click="setCount">set count</Button> | 23 | <Button @click="setCount">set count</Button> |
| 24 | + | ||
| 21 | </div> | 25 | </div> |
| 22 | </template> | 26 | </template> |
| 23 | <script> | 27 | <script> |
src/components/badge/badge.vue
| @@ -5,7 +5,7 @@ | @@ -5,7 +5,7 @@ | ||
| 5 | </span> | 5 | </span> |
| 6 | <span v-else :class="classes" ref="badge"> | 6 | <span v-else :class="classes" ref="badge"> |
| 7 | <slot></slot> | 7 | <slot></slot> |
| 8 | - <sup v-if="count" :class="countClasses" v-show="badge">{{ finalCount }}</sup> | 8 | + <sup v-if="hasCount" :class="countClasses" v-show="badge">{{ finalCount }}</sup> |
| 9 | </span> | 9 | </span> |
| 10 | </template> | 10 | </template> |
| 11 | <script> | 11 | <script> |
| @@ -23,7 +23,11 @@ | @@ -23,7 +23,11 @@ | ||
| 23 | type: [Number, String], | 23 | type: [Number, String], |
| 24 | default: 99 | 24 | default: 99 |
| 25 | }, | 25 | }, |
| 26 | - className: String | 26 | + className: String, |
| 27 | + showZero: { | ||
| 28 | + type: Boolean, | ||
| 29 | + default: false | ||
| 30 | + } | ||
| 27 | }, | 31 | }, |
| 28 | computed: { | 32 | computed: { |
| 29 | classes () { | 33 | classes () { |
| @@ -60,7 +64,12 @@ | @@ -60,7 +64,12 @@ | ||
| 60 | } | 64 | } |
| 61 | } | 65 | } |
| 62 | 66 | ||
| 63 | - return status; | 67 | + return status || this.showZero; |
| 68 | + }, | ||
| 69 | + hasCount() { | ||
| 70 | + if(this.count) return true; | ||
| 71 | + if(this.showZero && parseInt(this.count) === 0) return true; | ||
| 72 | + else return false; | ||
| 64 | }, | 73 | }, |
| 65 | alone () { | 74 | alone () { |
| 66 | return this.$slots.default === undefined; | 75 | return this.$slots.default === undefined; |