vue防止按钮被多次重复点击封装自定义指令(前端)

在开发过程中,用按钮提交表单,或者按钮功能请求接口,不处理重复点击的话,会出现bug,和重复提交或者多次请求接口, 在vue中可以封装一个自定义指令!

在utils文件下创建一个js文件, 你也可以在main.js文件下直接写

import Vue from 'vue'const preventReClick = Vue.directive('preventReClick', {inserted: function(el, binding) {el.addEventListener('click', () => {if (!el.disabled) {el.disabled = truesetTimeout(() => {el.disabled = false}, binding.value || 2000)}})}});export {preventReClick }

引入到main,js

// main,js文件import './utils/preventReClick'

之后直接使用就可以了

<button v-preventReClick>这样就防止多次点击了</button>