vue3+elementPlus+原生js：根据浏览器宽度的element进度条跟着缩放

原创已于 2022-10-21 16:43:25 修改 · 1.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #html #vue.js #ecmascript

于 2022-10-21 16:34:34 首次发布

本文介绍了如何通过原生JavaScript获取DOM元素并动态调整样式，以实现浏览器缩放时ElementPlus的环形进度条（el-progress）自适应布局。在Vue3应用中，通过监听窗口大小变化，根据屏幕宽度设置不同宽度的样式，确保在不同设备上都有良好的显示效果。

项目背景：

浏览器缩放时，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();
  };
});

作者上一篇文章，

vue3+elementPlus：el-progress环形进度条自定义样式和文本_意初的博客-优快云博客vue3+elementPlus：el-progress环形进度条自定义颜色，在属性里有:color自定义回调的颜色函数，:percentage代表进度条（数量），如果有后端接口这里就放接口的数据，type="circle"是环形，template是模板，用来封装自定义的样式或者数据，在el-progress里包裹一层template，里面用来自定义进度条和文本数据，事件层简单demo，根据数据自定义颜色，完整代码：html层的重点：①template模板里要放percentage②如果有后端接口:perchttps://blog.youkuaiyun.com/weixin_43928112/article/details/127370918