Vue自定义指令 限制按钮短时间内重复提交

1. 项目中创建directive文件夹,用来存放自定义指令,新建index.js

2. export default {
     install(Vue) {
       // 禁止短时间内重复点击
       Vue.directive("preventClick", {
         inserted(button, bind) {
           button.addEventListener("click", () => {
             if (!button.disabled) {
               button.disabled = true;
               setTimeout(() => {
                 button.disabled = false;
               }, 1000);
             }
           });
         }
       });
     }
   };
   

    

3. main.js中引入,全局使用

4. import preventClick from './directive/index'
   Vue.use(preventClick)

    

5. 在需要使用的按钮上面加上自定义指令

6. <button v-preventClick>登录</button>