Blame view

src/directives/repeatClick.ts 878 Bytes
vben authored
1
2
3
4
/**
 * Prevent repeated clicks
 * @Example v-repeat-click="()=>{}"
 */
5
import { on, once } from '/@/utils/domUtils';
vben authored
6
import type { Directive, DirectiveBinding } from 'vue';
7
vben authored
8
9
10
const repeatDirective: Directive = {
  beforeMount(el: Element, binding: DirectiveBinding<any>) {
    let interval: Nullable<IntervalHandle> = null;
11
    let startTime = 0;
vben authored
12
    const handler = (): void => binding?.value();
vben authored
13
    const clear = (): void => {
14
15
16
17
18
19
20
      if (Date.now() - startTime < 100) {
        handler();
      }
      interval && clearInterval(interval);
      interval = null;
    };
vben authored
21
    on(el, 'mousedown', (e: MouseEvent): void => {
22
23
24
25
26
27
28
29
      if ((e as any).button !== 0) return;
      startTime = Date.now();
      once(document as any, 'mouseup', clear);
      interval && clearInterval(interval);
      interval = setInterval(handler, 100);
    });
  },
};
vben authored
30
31

export default repeatDirective;