repeatClick.ts 880 B

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