|
@@ -1,95 +1,116 @@
|
|
<template>
|
|
<template>
|
|
- <div :style="svgStyle">
|
|
|
|
- <svg :style="svgStyle">
|
|
|
|
- <defs>
|
|
|
|
- <linearGradient id="orange_red" x1="1%" y1="0%" x2="100%" y2="0%">
|
|
|
|
- <stop offset="0%" style="stop-color: #24c3f1; stop-opacity: 1" />
|
|
|
|
- <stop offset="100%" style="stop-color: #5eedcc; stop-opacity: 1" />
|
|
|
|
- </linearGradient>
|
|
|
|
- </defs>
|
|
|
|
- <!--内边框 -->
|
|
|
|
- <path :d="pathString" :stroke="trailColor" :stroke-width="trailWidth" :fill-opacity="0" />
|
|
|
|
- <!--外边框 -->
|
|
|
|
- <path
|
|
|
|
- :d="pathString"
|
|
|
|
- stroke-linecap="round"
|
|
|
|
- stroke="url(#orange_red)"
|
|
|
|
- :stroke-width="strokeWidth"
|
|
|
|
- fill-opacity="0"
|
|
|
|
- :style="pathStyle"
|
|
|
|
- />
|
|
|
|
- </svg>
|
|
|
|
- <div class="vux-circle-content">
|
|
|
|
- <slot></slot>
|
|
|
|
- </div>
|
|
|
|
|
|
+ <div :style="svgStyle">
|
|
|
|
+ <svg :style="svgStyle">
|
|
|
|
+ <defs>
|
|
|
|
+ <linearGradient
|
|
|
|
+ id="orange_red"
|
|
|
|
+ x1="1%"
|
|
|
|
+ y1="0%"
|
|
|
|
+ x2="100%"
|
|
|
|
+ y2="0%"
|
|
|
|
+ >
|
|
|
|
+ <stop
|
|
|
|
+ offset="0%"
|
|
|
|
+ style="stop-color:#5eedcc ; stop-opacity: 1"
|
|
|
|
+ />
|
|
|
|
+ <!-- 24c3f1 -->
|
|
|
|
+ <stop
|
|
|
|
+ offset="100%"
|
|
|
|
+ style="stop-color: #24c3f1; stop-opacity: 1"
|
|
|
|
+ />
|
|
|
|
+ <!-- 5eedcc -->
|
|
|
|
+ </linearGradient>
|
|
|
|
+ </defs>
|
|
|
|
+ <!--内边框 -->
|
|
|
|
+ <path
|
|
|
|
+ :d="pathString"
|
|
|
|
+ :stroke="trailColor"
|
|
|
|
+ :stroke-width="trailWidth"
|
|
|
|
+ :fill-opacity="0"
|
|
|
|
+ />
|
|
|
|
+ <!--外边框 -->
|
|
|
|
+ <path
|
|
|
|
+ :d="pathString"
|
|
|
|
+ stroke-linecap="round"
|
|
|
|
+ stroke="url(#orange_red)"
|
|
|
|
+ :stroke-width="strokeWidth"
|
|
|
|
+ fill-opacity="0"
|
|
|
|
+ :style="pathStyle"
|
|
|
|
+ />
|
|
|
|
+ </svg>
|
|
|
|
+ <div class="vux-circle-content">
|
|
|
|
+ <slot></slot>
|
|
</div>
|
|
</div>
|
|
|
|
+ </div>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
<script>
|
|
export default {
|
|
export default {
|
|
- name: 'processCircle',
|
|
|
|
- props: {
|
|
|
|
- strokeWidth: {
|
|
|
|
- // 线条宽度
|
|
|
|
- type: Number,
|
|
|
|
- default: 1
|
|
|
|
- },
|
|
|
|
- strokeColor: {
|
|
|
|
- // 线条颜色
|
|
|
|
- type: String,
|
|
|
|
- default: '#2C3345'
|
|
|
|
- },
|
|
|
|
- trailWidth: {
|
|
|
|
- // 背景线条宽度
|
|
|
|
- type: Number,
|
|
|
|
- default: 1
|
|
|
|
- },
|
|
|
|
- trailColor: {
|
|
|
|
- // 背景线条宽度
|
|
|
|
- type: String,
|
|
|
|
- default: '#D9D9D9'
|
|
|
|
- },
|
|
|
|
- percent: {
|
|
|
|
- // 进度百分比
|
|
|
|
- type: Number,
|
|
|
|
- default: 0
|
|
|
|
- },
|
|
|
|
- rd: {
|
|
|
|
- // 圆大小半径
|
|
|
|
- type: Number,
|
|
|
|
- default: 60
|
|
|
|
- }
|
|
|
|
|
|
+ name: 'processCircle',
|
|
|
|
+ props: {
|
|
|
|
+ strokeWidth: {
|
|
|
|
+ // 线条宽度
|
|
|
|
+ type: Number,
|
|
|
|
+ default: 1
|
|
},
|
|
},
|
|
- computed: {
|
|
|
|
- svgStyle() {
|
|
|
|
- return {
|
|
|
|
- width: `${2 * this.rd}px`,
|
|
|
|
- height: `${2 * this.rd}px`,
|
|
|
|
- position: 'relative'
|
|
|
|
- };
|
|
|
|
- },
|
|
|
|
- radius() {
|
|
|
|
- // 外圆圆半径
|
|
|
|
- return this.rd - this.strokeWidth / 2;
|
|
|
|
- },
|
|
|
|
- pathString() {
|
|
|
|
- return `M ${this.rd},${this.rd} m 0,-${this.radius}
|
|
|
|
|
|
+ strokeColor: {
|
|
|
|
+ // 线条颜色
|
|
|
|
+ type: String,
|
|
|
|
+ default: '#2C3345'
|
|
|
|
+ },
|
|
|
|
+ trailWidth: {
|
|
|
|
+ // 背景线条宽度
|
|
|
|
+ type: Number,
|
|
|
|
+ default: 1
|
|
|
|
+ },
|
|
|
|
+ trailColor: {
|
|
|
|
+ // 背景线条宽度
|
|
|
|
+ type: String,
|
|
|
|
+ default: '#D9D9D9'
|
|
|
|
+ },
|
|
|
|
+ percent: {
|
|
|
|
+ // 进度百分比
|
|
|
|
+ type: Number,
|
|
|
|
+ default: 0
|
|
|
|
+ },
|
|
|
|
+ rd: {
|
|
|
|
+ // 圆大小半径
|
|
|
|
+ type: Number,
|
|
|
|
+ default: 60
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ computed: {
|
|
|
|
+ svgStyle () {
|
|
|
|
+ return {
|
|
|
|
+ width: `${2 * this.rd}px`,
|
|
|
|
+ height: `${2 * this.rd}px`,
|
|
|
|
+ position: 'relative'
|
|
|
|
+ };
|
|
|
|
+ },
|
|
|
|
+ radius () {
|
|
|
|
+ // 外圆圆半径
|
|
|
|
+ return this.rd - this.strokeWidth / 2;
|
|
|
|
+ },
|
|
|
|
+ pathString () {
|
|
|
|
+ return `M ${this.rd},${this.rd} 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}
|
|
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() {
|
|
|
|
- // Math.PI 圆周率 3.141592653589793 len是圆的周长
|
|
|
|
- return Math.PI * 2 * this.radius;
|
|
|
|
- },
|
|
|
|
- pathStyle() {
|
|
|
|
- return {
|
|
|
|
- 'stroke-dasharray': `${this.len}px ${this.len}px`,
|
|
|
|
- // eslint-disable-next-line prettier/prettier
|
|
|
|
- 'stroke-dashoffset': `${((100 - this.percent) / 100) * this.len}px`, // 动画占圆周长百分比
|
|
|
|
- transition: 'stroke-dashoffset 1s ease' // 2s代表动画时间
|
|
|
|
- };
|
|
|
|
- }
|
|
|
|
|
|
+ },
|
|
|
|
+ len () {
|
|
|
|
+ // Math.PI 圆周率 3.141592653589793 len是圆的周长
|
|
|
|
+ return Math.PI * 2 * this.radius;
|
|
|
|
+ },
|
|
|
|
+ pathStyle () {
|
|
|
|
+ console.log('55', ((this.percent) / 100) * this.len)
|
|
|
|
+ return {
|
|
|
|
+ 'stroke-dasharray': `${this.len}px ${this.len}px`,
|
|
|
|
+ // eslint-disable-next-line prettier/prettier
|
|
|
|
+ // 'stroke-dashoffset': this.percent == 0 ? `${((100 - this.percent) / 100) * this.len}px` : `${((this.percent) / 100) * this.len}px`, // 动画占圆周长百分比
|
|
|
|
+ 'stroke-dashoffset': `${((this.percent) / 100) * this.len}px`,
|
|
|
|
+ transition: 'stroke-dashoffset 1s ease' // 2s代表动画时间
|
|
|
|
+ };
|
|
}
|
|
}
|
|
|
|
+ }
|
|
};
|
|
};
|
|
</script>
|
|
</script>
|
|
|
|
|