动态设置element 组件样式

samscat

已于 2024-01-25 16:25:25 修改

阅读量665

点赞数 7

CC 4.0 BY-SA版权

文章标签： vue.js 前端 javascript

于 2024-01-25 16:25:02 首次发布

本文链接：https://blog.csdn.net/samscat/article/details/135847461

该篇文章介绍了如何使用JavaScript中的getStyle方法获取`.el-popover`元素的样式，然后利用MutationObserver监听元素样式变化，当style属性发生变化时，自动设置宽度为auto并保持原有最小宽度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

setStyle() {
      //获取标签 el-popover
      let elPopovers = document.querySelectorAll(".el-popover");
      elPopovers.forEach((item) => {
         var styles = getComputedStyle(item);
         var width = styles.getPropertyValue("width");
        // 监听里面样式变化
        new MutationObserver((mutationsList) => {
          mutationsList.forEach((mutation) => {
            if (mutation.attributeName == "style") {
              item.style.width = "auto"; // 设置宽度自动
              item.style.minWidth = width;
            }
          });
        }).observe(item, { attributes: true });
      });
    },