Commit 0baa35a024db650c91898fc728ff96316ce30112
1 parent
9d6b35e4
update Circle color default
Showing
2 changed files
with
12 additions
and
36 deletions
Show diff stats
examples/routers/circle.vue
| 1 | 1 | <template> |
| 2 | 2 | <div> |
| 3 | - <i-circle :percent="percent" dashboard :stroke-color="color"> | |
| 4 | - <Icon v-if="percent == 100" type="ios-checkmark" size="60" style="color:#5cb85c"></Icon> | |
| 5 | - <span v-else style="font-size:24px">{{ percent }}%</span> | |
| 3 | + <i-circle :percent="80"> | |
| 4 | + <span class="demo-i-circle-inner" style="font-size:24px">80%</span> | |
| 5 | + </i-circle> | |
| 6 | + <i-circle :percent="100" stroke-color="#5cb85c"> | |
| 7 | + <Icon type="ios-checkmark" size="60" style="color:#5cb85c"></Icon> | |
| 8 | + </i-circle> | |
| 9 | + <i-circle :percent="35" stroke-color="#ff5500"> | |
| 10 | + <span class="demo-i-circle-inner"> | |
| 11 | + <Icon type="ios-close" size="50" style="color:#ff5500"></Icon> | |
| 12 | + </span> | |
| 6 | 13 | </i-circle> |
| 7 | - <ButtonGroup size="large"> | |
| 8 | - <Button icon="ios-add" @click="add"></Button> | |
| 9 | - <Button icon="ios-remove" @click="minus"></Button> | |
| 10 | - </ButtonGroup> | |
| 11 | 14 | </div> |
| 12 | 15 | </template> |
| 13 | 16 | <script> |
| 14 | 17 | export default { |
| 15 | - data () { | |
| 16 | - return { | |
| 17 | - percent: 0 | |
| 18 | - } | |
| 19 | - }, | |
| 20 | - computed: { | |
| 21 | - color () { | |
| 22 | - let color = '#2db7f5'; | |
| 23 | - if (this.percent == 100) { | |
| 24 | - color = '#5cb85c'; | |
| 25 | - } | |
| 26 | - return color; | |
| 27 | - } | |
| 28 | - }, | |
| 29 | - methods: { | |
| 30 | - add () { | |
| 31 | - if (this.percent >= 100) { | |
| 32 | - return false; | |
| 33 | - } | |
| 34 | - this.percent += 10; | |
| 35 | - }, | |
| 36 | - minus () { | |
| 37 | - if (this.percent <= 0) { | |
| 38 | - return false; | |
| 39 | - } | |
| 40 | - this.percent -= 10; | |
| 41 | - } | |
| 42 | - } | |
| 18 | + | |
| 43 | 19 | } |
| 44 | 20 | </script> |
| ... | ... |