Circle add prop dashboard
This commit is contained in:
梁灏
parent
9f249603d0
commit
b40e2e96be
2 changed files with 82 additions and 61 deletions
|
|
@ -1,57 +1,44 @@
|
|||
<style lang="less">
|
||||
.demo-circle-custom{
|
||||
& h1{
|
||||
color: #3f414d;
|
||||
font-size: 28px;
|
||||
font-weight: normal;
|
||||
}
|
||||
& p{
|
||||
color: #657180;
|
||||
font-size: 14px;
|
||||
margin: 10px 0 15px;
|
||||
}
|
||||
& span{
|
||||
display: block;
|
||||
padding-top: 15px;
|
||||
color: #657180;
|
||||
font-size: 14px;
|
||||
&:before{
|
||||
content: '';
|
||||
display: block;
|
||||
width: 50px;
|
||||
height: 1px;
|
||||
margin: 0 auto;
|
||||
background: #e0e3e6;
|
||||
position: relative;
|
||||
top: -15px;
|
||||
};
|
||||
}
|
||||
& span i{
|
||||
font-style: normal;
|
||||
color: #3f414d;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<i-circle
|
||||
:size="250"
|
||||
:trail-width="4"
|
||||
:stroke-width="5"
|
||||
:percent="75"
|
||||
stroke-linecap="square"
|
||||
stroke-color="#43a3fb">
|
||||
<div class="demo-circle-custom">
|
||||
<h1>{{ 42001776 }}</h1>
|
||||
<p>消费人群规模</p>
|
||||
<span>
|
||||
总占人数
|
||||
<i>75%</i>
|
||||
</span>
|
||||
</div>
|
||||
</i-circle>
|
||||
<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>
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
<template>
|
||||
<div :style="circleSize" :class="wrapClasses">
|
||||
<svg viewBox="0 0 100 100">
|
||||
<path :d="pathString" :stroke="trailColor" :stroke-width="trailWidth" :fill-opacity="0"/>
|
||||
<path :d="pathString" :stroke-linecap="strokeLinecap" :stroke="strokeColor" :stroke-width="strokeWidth" fill-opacity="0" :style="pathStyle"/>
|
||||
<path :d="pathString" :stroke="trailColor" :stroke-width="trailWidth" :fill-opacity="0" :style="trailStyle" />
|
||||
<path :d="pathString" :stroke-linecap="strokeLinecap" :stroke="strokeColor" :stroke-width="computedStrokeWidth" fill-opacity="0" :style="pathStyle" />
|
||||
</svg>
|
||||
<div :class="innerClasses">
|
||||
<slot></slot>
|
||||
|
|
@ -46,6 +46,10 @@
|
|||
trailColor: {
|
||||
type: String,
|
||||
default: '#eaeef2'
|
||||
},
|
||||
dashboard: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -55,23 +59,53 @@
|
|||
height: `${this.size}px`
|
||||
};
|
||||
},
|
||||
computedStrokeWidth () {
|
||||
return this.percent === 0 && this.dashboard ? 0 : this.strokeWidth;
|
||||
},
|
||||
radius () {
|
||||
return 50 - this.strokeWidth / 2;
|
||||
},
|
||||
pathString () {
|
||||
return `M 50,50 m 0,-${this.radius}
|
||||
a ${this.radius},${this.radius} 0 1 1 0,${2 * this.radius}
|
||||
a ${this.radius},${this.radius} 0 1 1 0,-${2 * this.radius}`;
|
||||
if (this.dashboard) {
|
||||
return `M 50,50 m 0,${this.radius}
|
||||
a ${this.radius},${this.radius} 0 1 1 0,-${2 * this.radius}
|
||||
a ${this.radius},${this.radius} 0 1 1 0,${2 * this.radius}`;
|
||||
} else {
|
||||
return `M 50,50 m 0,-${this.radius}
|
||||
a ${this.radius},${this.radius} 0 1 1 0,${2 * this.radius}
|
||||
a ${this.radius},${this.radius} 0 1 1 0,-${2 * this.radius}`;
|
||||
}
|
||||
},
|
||||
len () {
|
||||
return Math.PI * 2 * this.radius;
|
||||
},
|
||||
trailStyle () {
|
||||
let style = {};
|
||||
if (this.dashboard) {
|
||||
style = {
|
||||
'stroke-dasharray': `${this.len - 75}px ${this.len}px`,
|
||||
'stroke-dashoffset': `-${75 / 2}px`,
|
||||
'transition': 'stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s'
|
||||
}
|
||||
}
|
||||
return style;
|
||||
},
|
||||
pathStyle () {
|
||||
return {
|
||||
'stroke-dasharray': `${this.len}px ${this.len}px`,
|
||||
'stroke-dashoffset': `${((100 - this.percent) / 100 * this.len)}px`,
|
||||
'transition': 'stroke-dashoffset 0.6s ease 0s, stroke 0.6s ease'
|
||||
};
|
||||
let style = {};
|
||||
if (this.dashboard) {
|
||||
style = {
|
||||
'stroke-dasharray': `${(this.percent / 100) * (this.len - 75)}px ${this.len}px`,
|
||||
'stroke-dashoffset': `-${75 / 2}px`,
|
||||
'transition': 'stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s'
|
||||
};
|
||||
} else {
|
||||
style = {
|
||||
'stroke-dasharray': `${this.len}px ${this.len}px`,
|
||||
'stroke-dashoffset': `${((100 - this.percent) / 100 * this.len)}px`,
|
||||
'transition': 'stroke-dashoffset 0.3s ease 0s, stroke 0.3s ease'
|
||||
};
|
||||
}
|
||||
return style;
|
||||
},
|
||||
wrapClasses () {
|
||||
return `${prefixCls}`;
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue