使用element-resize-detector监听div的高宽变化_element-resize-detector 监听div

需求：

做一个大屏展示，需要全屏显示以及宽度自适应，就是说高宽发生变化时，需要重新局部刷新渲染

场景：

1、

点击按钮

隐藏或显示侧边栏，此时大屏主体的高宽发生变化 

2、按f11键时，会整个板块占满全屏，包括项目标题、侧边栏、大屏主体，但是想实现的是点击大屏，大屏单独占满全屏

 试错：

之前用浏览器可视窗口来做这个功能，发现以上两个场景都不太满足需求，以下是window.addEventListener的resize事件

  // 监听窗口
    this.$nextTick(() => {
     window.addEventListener("resize", this.changView);
     });

涉及以下函数及功能

1）changView函数

   changView() {
      // 监听浏览器窗口大小改变
      // 浏览器变化执行动作
      setTimeout(() => {
        this.reloadFn();
      }, 1000);
    },

2）reloadFn函数

  // 局部刷新页面
    reloadFn() {
      //isReload是一个布尔值，将其绑定在想作用的局部刷新的盒子上即可，用v-if="isReload"
      this.isReload = false;
      this.$nextTick(() => {
        this.isReload = true;
      });
    },

3）记得注销浏览器窗口监听

  beforeDestroy() {
    // 事件注销
    window.removeEventListener("resize", this.changView);
  },

其实这些也可以实现对应的需求，如果没有以上两点要求的话

实际操作代码（满足以上需求的）

1）采用element-resize-detector

安装依赖：

npm i element-resize-detector

文档地址：

element-resize-detector npm 地址

2）全局引入

// main.js （组件中按需引入方式，见2.使用方法中代码）
import ElementResizeDetectorMaker from "element-resize-detector";
Vue.prototype.$erd = ElementResizeDetectorMaker();

3）在mounted钩子函数中

  mounted() {
    const elementResizeDetectorMaker = require("element-resize-detector");
   this.$nextTick(()=>{
    let erd = elementResizeDetectorMaker();
    //bigbox1就是需要监听的盒子的id
    erd.listenTo(document.getElementById("bigbox1"),
    (ele) => {
     //这是一个防抖函数，避免重复调用函数卡死
      debounce(this.changView)
    });
   })
}

4）debounce是引入的一个js文件里面的防抖方法

//防抖
export const debounce = (() => {
  let timer = null
  return (callback, wait = 200) => {
    timer&&clearTimeout(timer)
    timer = setTimeout(callback, wait)
  }
})()
 
// 节流
export const throttle = (() => {
  let last = 0
  return (callback, wait = 200) => {
    let now = +new Date()
    if (now - last > wait) {
      callback()
      last = now
    }
  }
})()

记得引入对应文件再使用

import {debounce} from './components/utils';

参考文章：Vue中 引入使用 element-resize-detector 监听 Dom 元素 宽度、高度 变化_明天也要努力的博客-CSDN博客vue使用element-resize-detector监听元素宽度变化_Agwenbi的博客-CSDN博客