export default {
  mounted(el, binding) {
    let timeoutId;
    const delay = parseInt(binding.value) || 2000; // 獲取指令參數(shù)，如果沒有，則默認(rèn)為 2000ms
    el.addEventListener('click', () => {
      if (!el.disabled) {
        el.disabled = true;
        clearTimeout(timeoutId); // 清除之前的定時器
        timeoutId = setTimeout(() => {
          el.disabled = false;
        }, delay);
      }
    });
  },
};

2.在main.js中全局引入該自定義指令，并將其注冊到應(yīng)用程序中。示例代碼如下：

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');

在上述代碼中，app.directive方法用于全局注冊自定義指令，將自定義指令注冊到Vue應(yīng)用程序中。通過此方法，可以在整個應(yīng)用程序中使用該指令，而不需要重復(fù)定義或?qū)胫噶睢?/p>

1.在模板中使用該自定義指令。在模板中使用該指令的方法與Vue2中相同，示例如下：

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

在上述代碼中，v-throttle.click表示注冊的自定義指令名稱，后面的 .click表示該指令對應(yīng)原生的click事件，.2000表示傳入的參數(shù)為2000ms，也可以省略。

需要注意的是，在Vue3中，app.directive方法用于全局注冊自定義指令，不再支持在組件實例選項中注冊全局指令。因此，如果需要在組件內(nèi)使用自定義指令，需要在組件內(nèi)部使用局部自定義指令，并將其作為選項傳遞給Vue組件實例。

Vue2與Vue3中的自定義指令實現(xiàn)方式略有不同，但實現(xiàn)的按鈕截流功能是類似的。

在Vue2中，可以通過以下代碼實現(xiàn)按鈕截流指令：

// 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);
      }
    });
  },
};

在Vue2中，自定義指令的鉤子函數(shù)bind等同于Vue3中的mounted，表示指令綁定到元素上時執(zhí)行的函數(shù)。在上述代碼中，指令綁定到按鈕的點擊事件上，在點擊事件發(fā)生時，將按鈕禁用，并設(shè)定一個延時，在延時結(jié)束后，將按鈕恢復(fù)為啟用狀態(tài)。

到此這篇關(guān)于Vue3 全局使用按鈕截流指令示例代碼的文章就介紹到這了,更多相關(guān)Vue3按鈕截流指令內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: