vue監聽dom大小改變案例
阿新 • • 發佈:2020-07-30
需求描述: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.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大小改變案例就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支援我們。