chart resize

wujingjing

2024-07-18 46df470bbba226da5224d9adc1c47ecfadf11e1d

 src/directive/customDirective.ts

@@ -184,3 +184,37 @@
      },
   });
}

//#region ====================== v-resize ======================
const resizeMap = new WeakMap();
const ob = new ResizeObserver((entries) => {
   for (const entry of entries) {
      // 获取dom元素的回调
      const handler = resizeMap.get(entry.target);
      //存在回调函数
      if (handler) {
         // 将监听的值给回调函数
         handler({
            width: entry.borderBoxSize[0].inlineSize,
            height: entry.borderBoxSize[0].blockSize,
         });
      }
   }
});

export const elementResizeDirective = (app: App) => {
   app.directive('resize', {
      mounted(el: any, binding: any) {
         //将dom与回调的关系塞入map
         resizeMap.set(el, binding.value);
         //监听el元素的变化
         ob.observe(el);
      },
      unmounted(el: any) {
         //取消监听
         ob.unobserve(el);
      },
   });
};

//#endregion