vue.js：使用自定义指令监听元素尺寸变化（宽度、高度）

vue 自定义指令 文档: https://cn.vuejs.org/v2/guide/custom-directive.html

定义指令

import Vue from 'vue';

// 自动注册到全局
Vue.directive('resize', {
  bind(el, binding) {
    // el为绑定的元素，binding为绑定给指令的对象
    console.log(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 });
      }
      width = style.width;
      height = style.height;
    }

    el.__vueSetInterval__ = setInterval(isReize, 300);
  },

  unbind(el) {
    console.log(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
  
22
  
23
  
24
  
25
  
26
  
27
  
28
 

使用

// src/main.js
// 引入指令
import '@/directives/resize.js';
  
 

  
1
  
2
  
3
  
4
 

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

  
 

  
1
 

handleResize({ width, height }) {
  console.log('handleResize', width, height);
}

  
 

  
1
  
2
  
3
 

参考
vue使用自定义指令监听元素宽、高变化

文章来源: pengshiyu.blog.csdn.net，作者：彭世瑜，版权归原作者所有，如需转载，请联系作者。

原文链接：pengshiyu.blog.csdn.net/article/details/125185151