vue监听dom大小改变案例
版权申诉
157 浏览量
2020-11-19
19:02:08
上传
评论
收藏 98KB PDF 举报
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(() => {
swiper.updata()
})
})
let content = document.getElementById('swiper')
this.observer.observe(content)
至于为什么watch不能兼听我的宽度的问题。。我感觉是只能监听被双向绑定的数据，也就是MVVM的数据，比如我们经常用
watch监听data和$route。但还是不太确定希望有大佬帮我~~~
补充知识：补充知识：vue 监听某个容器大小变化（饼状图适应容器大小变化）监听某个容器大小变化（饼状图适应容器大小变化）
评论0
最新资源