Vue如何监听DOM大小变化以适应长尾词布局调整？

本文共计751个文字，预计阅读时间需要4分钟。

需求描述：layout左侧菜单栏收缩，右侧content区域的swiper宽度不变（无图片，朋友的问题，大体如此）类似点击折叠左侧目录，右侧内容区域会变大，但swiper在刚开启时不变。

需求描述：layout左边菜单栏收缩，右边的content区域的swiper宽度没有改变（没有图，朋友的问题，大体画一下）

类似于点击折叠左边目录会变小，右边内容区域会变大，但是swiper在刚开始的时候就确定了宽度，所以我的想法是监听右边宽度大小去updata一下。但是我用vue的watch监听$refs.swiper.offsetwidth失败了！！！！但是宽度确实是在改变的很费解，先说一下解决方法把

1、使用element-resize-detector

var elementResizeDetectorMaker = require("element-resize-detector") erd.listenTo(document.getElementById("swiper"), function(element) { var width = element.offsetWidth; var height = element.offsetHeight; console.log("Size: " + width + "x" + height); }); //别为我为什么vue用getid。。我懒得改了。