VUE判断文本内容是否超出盒子最大宽度的方法

记录一下自己遇到的问题

item.orderMeters.forEach((item2, index2) => {

                    setTimeout(() => {

                      // 循环判断是否需要添加展开收起按钮,对比DOM宽度

                      // order+itgem2.id是通过v-for动态赋予ref

                      var orderRef = this.$refs["orderBox" + item2.id][0];

                      console.log("orderRef", orderRef);

                      console.log("获取盒子宽度", orderRef.clientWidth);

                      console.log("获取盒子宽度222", orderRef.scrollWidth);

                    }, 400);

                  });

循环一个数组 即使在mounted操作,orderRef.clientWidth 和 orderRef.scrollWidth都会等于0

因为元素的实例化是在这个生命周期的mounted之后，所以你可以实际得到它的长度。但方法的执行于mounted。那么实际上你得到了0。

而且它也受到动画因素的影响，这一次是关于.3s的，所以Vue.nextTick不会工作，使用setTimeout(()=>{}, 400)也是一个不错的解决方案，除非你监听动画事件。

转载为什么在打开模式时'$el.clientWidth‘等于0？(Vue.js) - 问答 - 腾讯云开发者社区-腾讯云