diff --git a/examples/routers/circle.vue b/examples/routers/circle.vue index 4ef8778..c71a1e9 100644 --- a/examples/routers/circle.vue +++ b/examples/routers/circle.vue @@ -1,44 +1,20 @@ <template> <div> - <i-circle :percent="percent" dashboard :stroke-color="color"> - <Icon v-if="percent == 100" type="ios-checkmark" size="60" style="color:#5cb85c"></Icon> - <span v-else style="font-size:24px">{{ percent }}%</span> + <i-circle :percent="80"> + <span class="demo-i-circle-inner" style="font-size:24px">80%</span> + </i-circle> + <i-circle :percent="100" stroke-color="#5cb85c"> + <Icon type="ios-checkmark" size="60" style="color:#5cb85c"></Icon> + </i-circle> + <i-circle :percent="35" stroke-color="#ff5500"> + <span class="demo-i-circle-inner"> + <Icon type="ios-close" size="50" style="color:#ff5500"></Icon> + </span> </i-circle> - <ButtonGroup size="large"> - <Button icon="ios-add" @click="add"></Button> - <Button icon="ios-remove" @click="minus"></Button> - </ButtonGroup> </div> </template> <script> export default { - data () { - return { - percent: 0 - } - }, - computed: { - color () { - let color = '#2db7f5'; - if (this.percent == 100) { - color = '#5cb85c'; - } - return color; - } - }, - methods: { - add () { - if (this.percent >= 100) { - return false; - } - this.percent += 10; - }, - minus () { - if (this.percent <= 0) { - return false; - } - this.percent -= 10; - } - } + } </script> diff --git a/src/components/circle/circle.vue b/src/components/circle/circle.vue index 52cbe95..762984a 100644 --- a/src/components/circle/circle.vue +++ b/src/components/circle/circle.vue @@ -31,7 +31,7 @@ }, strokeColor: { type: String, - default: '#2db7f5' + default: '#2d8cf0' }, strokeLinecap: { validator (value) { -- libgit2 0.21.4