SERVE_URL

wujingjing

2025-04-14 1df71bdd7fc5b35be1447c9cc574bf610666f436

 src/directive/customDirective.ts

@@ -11,17 +11,17 @@
         el.classList.add('waves-effect');
         binding.value && el.classList.add(`waves-${binding.value}`);
         function setConvertStyle(obj: { [key: string]: unknown }) {
            let style: string = '';
            for (let i in obj) {
            let style = '';
            for (const i in obj) {
               if (obj.hasOwnProperty(i)) style += `${i}:${obj[i]};`;
            }
            return style;
         }
         function onCurrentClick(e: { [key: string]: unknown }) {
            let elDiv = document.createElement('div');
            const elDiv = document.createElement('div');
            elDiv.classList.add('waves-ripple');
            el.appendChild(elDiv);
            let styles = {
            const styles = {
               left: `${e.layerX}px`,
               top: `${e.layerY}px`,
               opacity: 1,
@@ -52,6 +52,14 @@
      },
   });
}

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

/**
 * 自定义拖动指令
@@ -117,7 +125,7 @@
         }

         function move(e: any, type: string, obj: any) {
            let { disX, disY, minDragDomLeft, maxDragDomLeft, minDragDomTop, maxDragDomTop, styL, styT } = obj;
            const { disX, disY, minDragDomLeft, maxDragDomLeft, minDragDomTop, maxDragDomTop, styL, styT } = obj;

            // 通过事件委托，计算移动的距离
            let left = type === 'pc' ? e.clientX - disX : e.touches[0].clientX - disX;
@@ -176,3 +184,50 @@
      },
   });
}

//#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
//#region ====================== v-focus指令 ======================
export const focusDirective = (app: App) => {
   app.directive('focus', {
      mounted: function (el) {
         // 由于el-input是一个组件，需要找到内部的input元素
         const inputEl = el.querySelector('input');
         if (inputEl) {
            inputEl.focus();
         }
      },
   });
};
//#endregion