快捷導(dǎo)航

vue監(jiān)聽dom大小改變案例

更新時(shí)間：2020年07月29日 15:42:39 作者：是鑫❤呀！

這篇文章主要介紹了vue監(jiān)聽dom大小改變案例，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧

需求描述：layout左邊菜單欄收縮，右邊的content區(qū)域的swiper寬度沒有改變（沒有圖，朋友的問題，大體畫一下）

類似于點(diǎn)擊折疊左邊目錄會變小，右邊內(nèi)容區(qū)域會變大，但是swiper在剛開始的時(shí)候就確定了寬度，所以我的想法是監(jiān)聽右邊寬度大小去updata一下。但是我用vue的watch監(jiān)聽$refs.swiper.offsetwidth失敗了！?。?！但是寬度確實(shí)是在改變的很費(fèi)解，先說一下解決方法把

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不能兼聽我的寬度的問題。。我感覺是只能監(jiān)聽被雙向綁定的數(shù)據(jù)，也就是MVVM的數(shù)據(jù)，比如我們經(jīng)常用watch監(jiān)聽data和$route。但還是不太確定希望有大佬幫我~~~

補(bǔ)充知識：vue 監(jiān)聽某個(gè)容器大小變化（餅狀圖適應(yīng)容器大小變化）

需求

echarts圖表根據(jù)容器大小改變大小

主要應(yīng)用了vue 監(jiān)聽 dom元素尺寸的變化

element提供的 element-resize-detector 可以輕松解決問題的存在

安裝依賴

npm install element-resize-detector

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

phontoImage(){   //渲染餅圖調(diào)用的方法
       var echarts = require('echarts');
       var elementResizeDetectorMaker = require("element-resize-detector");//引入監(jiān)聽dom變化的組件
       var erd = elementResizeDetectorMaker();
       var worldMapContainer = document.getElementById('main4'); //獲取 圖標(biāo)容器dom元素
        var that = this;
     //用于使chart自適應(yīng)高度和寬度,通過窗體高寬計(jì)算容器高寬
     var resizeWorldMapContainer = function () {
       worldMapContainer.style.width = worldMapContainer.scrollWidth+'px';
       worldMapContainer.style.height = worldMapContainer.clientHeight+'px';
     };

     // 基于準(zhǔn)備好的dom，初始化echarts實(shí)例
     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, //環(huán)形餅圖中間部分的名稱
             //subtext:rentalVal,
             textStyle:{  //中間部分字體樣式
               fontSize:14,
               color:"black" 
             },
             subtextStyle: { // 中間下邊一行字體樣式
               fontSize:14,
               color: 'black'
             },
             textAlign:"center",
             x: '43%',   //字體在餅圖中的位置
             y: '44%',
           }],
           tooltip : {
             trigger: 'item',
             formatter: "{a} <br/> : {c} (vvxyksv9kd%)"
           },
           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%'], //設(shè)置一個(gè)區(qū)間 就是環(huán)形餅狀圖
               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) { //執(zhí)行監(jiān)聽 
          that.$nextTick(function () {
            myChart.resize(); //變化重新渲染餅圖

   })
  })
      },

以上這篇vue監(jiān)聽dom大小改變案例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: