在开发过程中,用按钮提交表单,或者按钮功能请求接口,不处理重复点击的话,会出现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>