vue2 グローバル ディレクティブ - 一定期間内のボタン クリック イベントを制限する

デマンド: リクエストを送信するボタンをクリックする際、素早く連続してクリックすると複数のリクエストを送信することが簡単になりますが、一定時間内にボタンを複数回クリックしてもリクエストを 1 つしか送信できないようにするにはどうすればよいでしょうか?

解決策:

複数回クリックしてリクエストを 1 つだけ送信する場合は、手ぶれ補正スロットル機能を使用できます。もちろん、ローカルまたはグローバルのカスタム命令を記述して、ボタンのクリック イベントを制限することもできます。

解決：

今回使用するのは、グローバル命令を使用してボタンのクリック イベントを制限し、他のページの利用を容易にすることです (個人的なテストに役立ちます)。

この記事は直接コピーして貼り付けることができます (ただし、最初にコードのロジックを理解してください)。

1. まず、src ディレクトリに新しいディレクティブ フォルダーを作成し、このフォルダーに新しいファイルを作成して、preventClick.js という名前を付け、ファイルに次のコードを書き込みます。

// 设置全局指令,对button按钮进行点击限制
export default {
    install(Vue) {
      Vue.directive('preventClick', {
        inserted(button, bind) {
          button.addEventListener('click', () => {
            if (!button.disabled) { // 按钮有disabled属性
              button.disabled = true;
              setTimeout(() => {
                button.disabled = false
              }, 5000)
            }
          })
        }
      })
    }
}

2. main.js にグローバルに登録します

// 全局指令
import preventClick from '@/directive/preventClick.js'
Vue.use(preventClick)

3. 使用する必要があるファイルを直接 v-preventクリックするだけです

<button v-if="score.enabledStatu" @click="stopScan(text, score)" class="options" v-preventClick>停止</button>

要約:

ニーズはたくさんありますが、解決策もたくさんあるので、ゆっくり分析してみましょう。この記事が包括的でない場合は、お知らせください。