```
<!
-- 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.border
Width,
"
--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: {
border
Width: "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>```解析代码
本文详细介绍了浏览器窗口的尺寸属性，包括innerHeight、innerWidth、outerHeight和outerWidth的区别与用法。innerHeight和innerWidth返回文档显示区的高度和宽度，不包含工具栏和滚动条；而outerHeight和outerWidth则包含了所有界面元素。
扫一扫
293
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
