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__);
  }
});      

使用

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

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

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