97 lines
2.0 KiB
Vue
97 lines
2.0 KiB
Vue
<template>
|
||
<view class="circle-progress">
|
||
<view class="circle-progress__content">
|
||
<text class="circle-progress__text">{{ percentage }}%</text>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: "CircleProgress",
|
||
props: {
|
||
// 圆环进度百分比值，0-100
|
||
percentage: {
|
||
type: Number,
|
||
default: 0,
|
||
validator: (value) => value >= 0 && value <= 100,
|
||
},
|
||
// 进度条颜色
|
||
color: {
|
||
type: String,
|
||
default: "#42b983", // 绿色主题色
|
||
},
|
||
// 背景颜色
|
||
backgroundColor: {
|
||
type: String,
|
||
default: "#c8c8c8", // 灰色
|
||
},
|
||
// 尺寸
|
||
size: {
|
||
type: Number,
|
||
default: 100,
|
||
},
|
||
// 边框宽度
|
||
borderWidth: {
|
||
type: Number,
|
||
default: 5,
|
||
},
|
||
},
|
||
computed: {
|
||
progressStyle() {
|
||
const degrees = this.percentage * 3.6; // 将百分比转换为角度
|
||
const style = {
|
||
width: `${this.size}px`,
|
||
height: `${this.size}px`,
|
||
borderWidth: `${this.borderWidth}px`,
|
||
borderColor: this.backgroundColor,
|
||
};
|
||
|
||
// 根据进度设置不同的样式
|
||
if (this.percentage <= 50) {
|
||
style.background = `conic-gradient(
|
||
${this.color} 0deg ${degrees}deg,
|
||
${this.backgroundColor} ${degrees}deg 360deg
|
||
)`;
|
||
} else {
|
||
style.background = `conic-gradient(
|
||
${this.color} 0deg 180deg,
|
||
${this.backgroundColor} 180deg 360deg
|
||
)`;
|
||
}
|
||
|
||
return style;
|
||
},
|
||
textStyle() {
|
||
return {
|
||
fontSize: `${this.size * 0.2}px`,
|
||
};
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.circle-progress {
|
||
position: relative;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
&__content {
|
||
position: relative;
|
||
border-radius: 50%;
|
||
mask: radial-gradient(transparent 60%, black 61%);
|
||
}
|
||
|
||
&__text {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
font-weight: bold;
|
||
color: #333;
|
||
z-index: 2;
|
||
}
|
||
}
|
||
</style> |