快捷導(dǎo)航

vue+element項(xiàng)目實(shí)時(shí)監(jiān)聽div寬度的變化

更新時(shí)間：2024年08月07日 10:10:25 作者：隨便起的名字也被占用

這篇文章主要介紹了vue+element項(xiàng)目里實(shí)時(shí)監(jiān)聽某個(gè)div寬度的變化,然后執(zhí)行相應(yīng)的事件,本文結(jié)合示例代碼給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧

背景：

vue項(xiàng)目中用到echarts圖表，頁(yè)面上有側(cè)邊欄，側(cè)邊欄收縮圖表不能自適應(yīng)，想通過(guò)監(jiān)聽內(nèi)容部分的寬度讓圖表resize，試過(guò)window帶的resize，只能監(jiān)聽瀏覽器窗口大小變化，為了監(jiān)聽某元素區(qū)域的變化而使echarts的尺寸重置。

本次解決采用 element-resize-detector 可以完美的解決

思路：因?yàn)槭湛s側(cè)邊欄的時(shí)候右側(cè)的區(qū)域會(huì)自動(dòng)適應(yīng)，但是echarts不會(huì)隨之改變

element提供的 element-resize-detector 可以輕松解決問(wèn)題的存在

第一步：在項(xiàng)目中安裝 element-resize-detector

npm install element-resize-detector

第二步：在項(xiàng)目中使用

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.
});
//監(jiān)聽元素size變化，觸發(fā)響應(yīng)事件
erd.listenTo(document.getElementById("test"), function(element) {
  var width = element.offsetWidth;
  var height = element.offsetHeight;
  console.log("Size: " + width + "x" + height);
});

（2）require 引入使用，在cli項(xiàng)目中使用，需要用到的頁(yè)面 ***.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()
      })
    })

因?yàn)間if圖為錄屏所以導(dǎo)航欄比較卡頓，勉強(qiáng)看一下哦

附大GIF圖壓縮工具地址：https://ezgif.com/resize/ezgif-1-d76f5cf7b36f.gif

基本解決問(wèn)題，有更好的方案，歡迎留言指導(dǎo)，謝謝

更新自定義指令方法

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

到此這篇關(guān)于vue+element項(xiàng)目里實(shí)時(shí)監(jiān)聽某個(gè)div寬度的變化，然后執(zhí)行相應(yīng)的事件的文章就介紹到這了,更多相關(guān)vue element監(jiān)聽div寬度變化內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: