项目背景:
浏览器缩放时,el进度条还是固定的宽度无法达到自适应状态,所以要使用原生js获取dom来进行判断即可
html层,四个环形进度条
<div class="progressState">
<el-progress style="" status="success" type="circle" :percentage="xxx"
...
</el-progress>
<el-progress style="" status="success" type="circle" :percentage="xxx"
...
</el-progress>
<el-progress style="" status="success" type="circle" :percentage="xxx"
...
</el-progress>
<el-progress style="" status="success" type="circle" :percentage="xxx"
...
</el-progress>
</div>
js层,直接编写响应函数,先用querySelectorAll获取所有进度条的dom之后,在进行循环遍历在for循环里进行样式的改写
const setDom = () => {
// 这里是浏览器的宽度,用来判断进度条的大小样式
let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
// 获取所有进度条的dom
let progressDom = document.querySelectorAll(".el-progress");
//进度条的响应样式
for (let i = 0; i < progressDom.length; i++) {
//当浏览器宽度大于1200,进度条宽度为70px,下面以此类推
if (htmlWidth >= 1200) {
progressDom[i].style.width = `70px`;
} else if (htmlWidth <= 1200 && htmlWidth >= 720) {
progressDom[i].style.width = `60px`;
} else if (htmlWidth < 720) {
progressDom[i].style.width = `30px`;
}
}
}
//最后在vue视图挂载,window.onresize指的是实时监听变化
onMounted(() => {
setDom();
window.onresize = () => {
setDom();
};
});
作者上一篇文章,