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 监听某个容器大小变化（饼状图适应容器大小变化）

需求

echarts图表 根据容器大小改变大小

主要应用了vue 监听 dom元素 尺寸的变化

element提供的 element-resize-detector 可以轻松解决问题的存在

安装依赖

npm install element-resize-detector

require 引入使用，需要用到的页面 ***.vue 引入

phontoImage(){ //渲染饼图调用的方法 var echarts = require(’echarts’); var elementResizeDetectorMaker = require('element-resize-detector');//引入监听dom变化的组件 var erd = elementResizeDetectorMaker(); var worldMapContainer = document.getElementById(’main4’); //获取 图标容器dom元素var that = this; //用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽 var resizeWorldMapContainer = function () { worldMapContainer.style.width = worldMapContainer.scrollWidth+’px’; worldMapContainer.style.height = worldMapContainer.clientHeight+’px’; }; // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(worldMapContainer);//var myChart = echarts.init(document.getElementById(’main1’));myChart.on(’click’,function(params){ that.open(params);});myChart.setOption({ title:[ { text: this.data4.name, //环形饼图中间部分的名称 //subtext:rentalVal, textStyle:{ //中间部分字体样式 fontSize:14, color:'black' }, subtextStyle: { // 中间下边一行字体样式 fontSize:14, color: ’black’ }, textAlign:'center', x: ’43%’, //字体在饼图中的位置 y: ’44%’, }], tooltip : { trigger: ’item’, formatter: '{a} <br/>{b} : {c} ({d}%)' }, legend: { type: ’scroll’, orient: ’vertical’, right: 10, top: 20, bottom: 20, data: this.data4.names, }, series : [ { name: this.data4.name, type: ’pie’, radius : [’40%’, ’60%’], //设置一个区间 就是环形饼状图 center: [’45%’, ’50%’], data:this.data4.values, itemStyle: { emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: ’rgba(0, 0, 0, 0.5)’ }, normal:{ color:function(params) { //自定义颜色 var colorList =[’#7c277d’,’#7460ee’, ’#FC3468’, ’#1e88e5’, ’#ffb22b’, ’#fc4b6c’, ’#708069’, ’#26c6da’,’#fcc525’, ’#8d6658’]; return colorList[params.dataIndex] } } } } ]});erd.listenTo(worldMapContainer, function (element) { //执行监听 that.$nextTick(function () { myChart.resize(); //变化重新渲染饼图 }) }) },

以上这篇vue监听dom大小改变案例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持好吧啦网。