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 | <template> | 1 | <template> |
| 2 | <div> | 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 | </i-circle> | 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 | </div> | 14 | </div> |
| 12 | </template> | 15 | </template> |
| 13 | <script> | 16 | <script> |
| 14 | export default { | 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 | </script> | 20 | </script> |
src/components/circle/circle.vue