需求描述：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} (dphr7xbzdxf%)' }, 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大小改變案例就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持好吧啦網。