vue3.0 监听页面dom大小的方法_vue3监听页面大小

这里提供两种解决方案
1、使用element-resize-detector插件
2、使用自定义指令

element-resize-detector插件

前言： 记录一个好用的包，在做自适应模块的时候，可以实时监听页面中元素的宽高变化，弥补了window.onresize只能监听到由浏览器大小变化引起的元素变化的局限性；

安装方法：

npm install element-resize-detector
1

或

<script src="node_modules/element-resize-detector/dist/element-resize-detector.min.js"></script>
1

使用：

<div ref="box" id="box"></div>
1

import elementResizeDetectorMaker from 'element-resize-detector';
var erd = elementResizeDetectorMaker(); //创建实例

mounted() {
    //监听id为box的元素
    erd.listenTo(document.getElementById("box"),(element)=>{
        var width = element.offsetWidth;
    	var height = element.offsetHeight;
    });
},
beforeDestroy(){
	//离开页面删除检测器和所有侦听器
    erd.uninstall(this.$refs.box); //这里用ref是因为vue离开页面后获取不到dom
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14

补充： erd 实例方法

RemoveListener(element，listener)
1

从元素中移除侦听器

RemoveAllListener(element)
1

从元素中移除所有侦听器，但不完全删除检测器。如果以后可能会添加侦听器，并且不希望检测器再次初始化，请使用此函数

uninstall(element)
1

完全删除检测器和所有侦听器

使用自定义指令

export default {
  mounted(el, binding) {

    // 聚焦元素|
    if (binding.value) {
      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);
    }
  },
  unmounted(el) {
    clearInterval(el.__vueSetInterval__);
  }
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<div v-resize="resize"></div>
1

const resize = () => {
      console.log('resize: ');
 };
1
2
3