按钮重复点击问题

问题：用户过快点击，导致信息重复提交，引起数据异常

解决方案：同一个按钮，一定时间内限制重复点击

1. 引入preventReClick.js

   export default {
       install(Vue) {
           // 防止重复点击
           Vue.directive('preventReClick', {
               inserted(el, binding) {
                   el.addEventListener('click', () => {
                       if (!el.disabled) {
                           el.disabled = true;
                           el.style.pointerEvents = 'none';
                           setTimeout(() => {
                               el.disabled = false;
                               el.style.pointerEvents = 'auto';
                           }, binding.value || 1000)
                       }
                   })
               }
           })
       }
   }
   

2. main.js全局挂载

   // 防止多次点击
   import preventReClick from "./utils/preventReClick";
   Vue.use(preventReClick);
   

3. 使用时直接在标签中加入 v-preventReClick 属性即可

   <div v-preventReClick @click="saveForm"> </div>
   <div v-preventReClick="3000" @click="saveForm"> </div><!-- 自定义不可重复点击时间 3000 毫秒 -->