zhengyiming
2025-02-10 958b79ed89b9e742540f714a80261d222c0fc09b
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
import { Directive } from 'vue';
import type { DirectiveBinding, VNode } from 'vue';
import elementResizeDetectorMaker from 'element-resize-detector';
import type { Erd } from 'element-resize-detector';
import { emitter } from '@/utils';
 
const erd: Erd = elementResizeDetectorMaker({
  strategy: 'scroll',
});
 
export const resize: Directive = {
  mounted(el: HTMLElement, binding?: DirectiveBinding, vnode?: VNode) {
    erd.listenTo(el, (elem) => {
      const width = elem.offsetWidth;
      const height = elem.offsetHeight;
      if (binding?.instance) {
        emitter.emit('resize', { detail: { width, height } });
      } else {
        vnode.el.dispatchEvent(new CustomEvent('resize', { detail: { width, height } }));
      }
    });
  },
  unmounted(el: HTMLElement) {
    erd.uninstall(el);
  },
};