首页 前端知识 使用element-resize-detector监听div的高宽变化

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

2024-02-17 09:02:14 前端知识 前端哥 859 290 我要收藏

需求:

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

场景:

1、

点击按钮

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

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

 试错:

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

  // 监听窗口
    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博客

转载请注明出处或者链接地址:https://www.qianduange.cn//article/2219.html
标签
elementui
评论
发布的文章

jquery.动画和事件

2024-03-03 11:03:13

jQuery位置方法

2024-03-03 11:03:13

jQuery中val()和text()的区别

2024-03-03 11:03:11

jquery实现甘特图时效管理

2024-03-03 11:03:47

django之 echarts数据可视化

2024-03-03 11:03:26

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!