Vue3 全局使用按钮截流指令示例代码

export default {
  mounted(el, binding) {
    let timeoutId;
    const delay = parseInt(binding.value) || 2000; // 获取指令参数，如果没有，则默认为 2000ms
    el.addEventListener('click', () => {
      if (!el.disabled) {
        el.disabled = true;
        clearTimeout(timeoutId); // 清除之前的定时器
        timeoutId = setTimeout(() => {
          el.disabled = false;
        }, delay);
      }
    });
  },
};

import { createApp } from 'vue';
import App from './App.vue';
import throttle from './directives/throttle';
const app = createApp(App);
app.directive('throttle', throttle);
app.mount('#app');

<template>
  <div>
    <button v-throttle.click="2000">Click Me</button>
  </div>
</template>

// throttle.js
export default {
  bind(el, binding) {
    let timeoutId;
    const delay = parseInt(binding.arg) || 2000;
    el.addEventListener('click', () => {
      if (!el.disabled) {
        el.disabled = true;
        clearTimeout(timeoutId);
        timeoutId = setTimeout(() => {
          el.disabled = false;
        }, delay);
      }
    });
  },
};