```
<!
-- demo1.vue
-->
<template>
<div class="chart
-box" :style="styObj">
<!
-- 进度条部分
-->
<div class="outer
-box">
<div class="inner
-box">
<div class="pointer
-box"></div>
</div>
</div>
<!
-- 插槽内容
-->
<div class="slot
-content">
<slot></slot>
</div>
</div>
</template>
<script>
export default {
props: {
rate: {
type: Number,
default: 0,
},
config: {
type: Object,
default: () => {
return {};
},
},
},
computed: {
styObj() {
let rate = 0;
if (this.rate <= 0) {
rate = 0;
} else if (this.rate >= 1) {
rate = 1;
} else {
rate = this.rate;
}
let endPos = `${rate * 100}%`;
let obj = Object.assign({}, this.defaultConfig, this.config);
let rotate = `rotate(${360 * rate}deg)`;
let chartRotate = obj.clockwise ? "rotateY(0deg)" : "rotateY(180deg)";
let showEyes = obj.showEyes ? 1 : 0;
return {
"
--background
-image": `conic
-gradient(${obj.startColor} 0%, ${obj.endColor} ${endPos}, transparent ${endPos})`,
"
--border-width": obj.
borderWidth,
"
--dot
-width": obj.circleSize,
"
--pointer
-rotate": rotate,
"
--background
-color": obj.
borderBackground,
"
--center
-gap
-bg": obj.centerCircleBg,
"
--circle
-color": obj.circleColor,
"
--clockwise
-wise": chartRotate,
"
--show
-eyes": showEyes,
"
--eyes
-size": obj.eyesSize,
"
--start
-color": obj.startColor,
};
},
},
data() {
return {
/* 此配置下所有属性均可在config中进行覆盖，实现个性化配置 */
defaultConfig: {
borderWidth: "8px", // 描边宽度
borderBackground: "#eee", // 描边
背景颜色
circleSize: "16px", // 结尾处圆点直径
circleColor: "#2ec4a7", // 结尾处圆点颜色
startColor: "#d5f4ee", // 进度条起始颜色
endColor: "#2ec4a7", // 进度条结束颜色
centerCircleBg: "#fff", // 中间空心圆
背景
clockwise: true, // 是否顺时针
showEyes: false, // 是否显示结尾处小眼睛
eyesSize: "8px", // 结尾处小眼睛大小
},
};
},
};
</script>
<style scoped>
.chart
-box {
position: relative;
width: 100%;
height: 100%;
}
/* 核心代码、控制进度条样式及进度 */
.outer
-box {
width: 100%;
height: 100%;
border-radius: 50%;
box
-sizing:
border-box;
background
-color: var(
--background
-color);
background
-image: var(
--background
-image);
padding: var(
--border-width);
transform: var(
--clockwise
-wise);
}
/* 开始处增加一个圆形端点, 模拟
圆角效果 */
.outer
-box::after {
content: "";
width: var(
--border-width);
height: var(
--border-width);
border-radius: 50%;
position: absolute;
left: 50%;
top: 0;
transform: translateX(
-50%);
background: var(
--start
-color);
}
/* 中间添加一个和
背景色一样的圆圈 */
.inner
-box {
position: relative;
width: 100%;
height: 100%;
border-radius: 50%;
background: var(
--center
-gap
-bg);
}
/* 指示针 */
.pointer
-box {
position: absolute;
left: 50%;
top: calc(0px
- var(
--border-width) / 2);
bottom: calc(0px
- var(
--border-width) / 2);
z
-index: 1;
transform
-origin: center center;
transform: var(
--pointer
-rotate);
}
/* 指示针的头部添加一个小圆点 */
.pointer
-box::after {
content: "";
position: absolute;
left: 50%;
top: 0;
width: var(
--dot
-width);
height: var(
--dot
-width);
border-radius: 50%;
background: var(
--circle
-color);
transform: translate(
-50%,
-50%);
}
/* 进度条结尾处添加一个小眼睛，
背景白色 */
.pointer
-box::before {
content: "";
position: absolute;
left: 50%;
top: 0;
width: var(
--eyes
-size);
height: var(
--eyes
-size);
border-radius: 50%;
background: #fff;
transform: translate(
-50%,
-50%);
z
-index: 1;
opacity: var(
--show
-eyes);
}
/* 插槽内容样式 */
.slot
-content {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: flex;
align
-items: center;
justify
-content: center;
}
</style>```解析代码
扫一扫
5097
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
