create-iking-admin/template-micro/iking-main-admin/src/global/directives/repeatClick.ts

金合技术中台脚手架

/*
 * @Author: wfl
 * @LastEditors: wfl
 * @description:
 * @updateInfo:
 * @Date: 2022-08-12 18:42:51
 * @LastEditTime: 2022-08-29 12:24:11
 */
/**
 * Prevent repeated clicks
 * @Example v-repeat-click="()=>{}"
 */
import { ikDomUtil } from 'iking-utils';
import type { Directive, DirectiveBinding } from 'vue';

const repeatDirective: Directive = {
  beforeMount(el: Element, binding: DirectiveBinding<any>) {
    let interval: Nullable<IntervalHandle> = null;
    let startTime = 0;
    const handler = (): void => binding?.value();
    const clear = (): void => {
      if (Date.now() - startTime < 100) {
        handler();
      }
      interval && clearInterval(interval);
      interval = null;
    };

    ikDomUtil.on(el, 'mousedown', (e: MouseEvent): void => {
      if ((e as any).button !== 0) return;
      startTime = Date.now();
      ikDomUtil.once(document as any, 'mouseup', clear);
      interval && clearInterval(interval);
      interval = setInterval(handler, 100);
    });
  },
};

export default repeatDirective;