update Circle color default
This commit is contained in:
parent
9d6b35e49b
commit
0baa35a024
2 changed files with 12 additions and 36 deletions
|
@ -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>
|
||||
|
|
|
@ -31,7 +31,7 @@
|
|||
},
|
||||
strokeColor: {
|
||||
type: String,
|
||||
default: '#2db7f5'
|
||||
default: '#2d8cf0'
|
||||
},
|
||||
strokeLinecap: {
|
||||
validator (value) {
|
||||
|
|
Loading…
Add table
Reference in a new issue