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>
|