vue 监听元素高度的变化_vue监听dom大小改变案例

需求描述：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。。我懒得改了。用ref获取dom也可以

2 、使用ResizeObserver

this.observer = new ResizeObserver(entries => {

entries.forEach(() => {

swi