vue+element項目里實時監聽某個div寬度的變化，然后執行相應的事件

背景：vue項目中用到echarts圖表，頁面上有側邊欄，側邊欄收縮圖表不能自適應，想通過監聽內容部分的寬度讓圖表resize，試過window帶的resize，只能監聽瀏覽器窗口大小變化，為了監聽某元素區域的變化而使echarts的尺寸重置。

可以看到收起時會圖表不會發生變化（上面的折線圖是已經調好的）

解決方式-----

• 一、自定義指令的方式
  1、局部自定義指令

directives: {  // 使用局部注冊指令的方式
  resize: { // 指令的名稱
    bind(el, binding) { // el為綁定的元素，binding為綁定給指令的對象
      let width = '', height = '';
      function isReize() {
        const style = document.defaultView.getComputedStyle(el);
        if (width !== style.width || height !== style.height) {
          binding.value();  // 關鍵
        }
        width = style.width;
        height = style.height;
      }
      el.__vueSetInterval__ = setInterval(isReize, 300);
    },
    unbind(el) {
      clearInterval(el.__vueSetInterval__);
    }
  }
}
//然后在html中
<div v-resize="resize"></div> // 綁定的resize是一個函數
//在methods中
resize() {  // 當寬高變化時就會執行
  //執行某些操作
}

2、如果是封裝的全局自定義指令
@/directives/index.js

import Vue from "vue"


Vue.directive("chartsWeith",{
    bind(el, binding) { // el為綁定的元素，binding為綁定給指令的對象
        let width = '', height = '';
        function isReize() {
            const style = document.defaultView.getComputedStyle(el);
            if (width !== style.width || height !== style.height) {
            binding.value();  // 關鍵
            }
            width = style.width;
            height = style.height;
        }
        el.__vueSetInterval__ = setInterval(isReize, 300);
    },
    unbind(el) {
        clearInterval(el.__vueSetInterval__);
    }
})

main.js中

...
import "@/directives"//引入自定義指令

圖表頁面中

//然后在html中
<div v-chartsWeith="resize"></div> // 綁定的resize是一個函數(v-chartsWeith表示全局指令的方法，resize表示執行的方法)
//在methods中
resize() {  // 當寬高變化時就會執行
  //執行某些操作
}

• 二、element提供的 element-resize-detector（沒實際使用，僅看到網上有這個方法）
  第一步：在項目中安裝 element-resize-detector

npm install element-resize-detector

第二步：在項目中使用

html

<div id="test">
    <div id="eChart">
</div>

（1）script引入

<script src="node_modules/element-resize-detector/dist/element-resize-detector.min.js"></script>
 
 
// With default options (will use the object-based approach).
var erd = elementResizeDetectorMaker();
 
// With the ultra fast scroll-based approach.
// This is the recommended strategy.
var erdUltraFast = elementResizeDetectorMaker({
  strategy: "scroll" //<- For ultra performance.
});
 
 
 
//監聽元素size變化，觸發響應事件
erd.listenTo(document.getElementById("test"), function(element) {
  var width = element.offsetWidth;
  var height = element.offsetHeight;
  console.log("Size: " + width + "x" + height);
});

（2）require 引入使用，在cli項目中使用，需要用到的頁面 ***.vue 引入

var elementResizeDetectorMaker = require("element-resize-detector")

在mounted中啟用

 var erd = elementResizeDetectorMaker()
    erd.listenTo(document.getElementById("test"), function (element) {
      var width = element.offsetWidth
      var height = element.offsetHeight
      that.$nextTick(function () {
        console.log("Size: " + width + "x" + height)
        //使echarts尺寸重置
        that.$echarts.init(document.getElementById("eChart")).resize()
       
      })
    })

轉載地址：https://blog.csdn.net/csl125/article/details/89245267