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>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<i-circle :percent="percent" dashboard :stroke-color="color">
|
<i-circle :percent="80">
|
||||||
<Icon v-if="percent == 100" type="ios-checkmark" size="60" style="color:#5cb85c"></Icon>
|
<span class="demo-i-circle-inner" style="font-size:24px">80%</span>
|
||||||
<span v-else style="font-size:24px">{{ percent }}%</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>
|
</i-circle>
|
||||||
<ButtonGroup size="large">
|
|
||||||
<Button icon="ios-add" @click="add"></Button>
|
|
||||||
<Button icon="ios-remove" @click="minus"></Button>
|
|
||||||
</ButtonGroup>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
export default {
|
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>
|
</script>
|
||||||
|
|
|
@ -31,7 +31,7 @@
|
||||||
},
|
},
|
||||||
strokeColor: {
|
strokeColor: {
|
||||||
type: String,
|
type: String,
|
||||||
default: '#2db7f5'
|
default: '#2d8cf0'
|
||||||
},
|
},
|
||||||
strokeLinecap: {
|
strokeLinecap: {
|
||||||
validator (value) {
|
validator (value) {
|
||||||
|
|
Loading…
Add table
Reference in a new issue