chart resize

wujingjing

2024-07-18 46df470bbba226da5224d9adc1c47ecfadf11e1d

 src/directive/customDirective.ts

@@ -53,6 +53,14 @@
   });
}

export const eleFocusDirective = (app: App) => {
   app.directive('elInputFocus', {
      mounted: (el) => {
         el.querySelector('input.el-input__inner')?.focus();
      },
   });
};

/**
 * 自定义拖动指令
 * @description  使用方式：v-drag="[dragDom,dragHeader]"，如 `<div v-drag="['.drag-container .el-dialog', '.drag-container .el-dialog__header']"></div>`
@@ -176,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