vue 引入自定义js组件并全局注册自定义指令, 防多次点击,重复提交

1 新建 preventReClick.js

import Vue from 'vue'

const preventReClick = Vue.directive('preventReClick', {
  inserted: function (el, binding) {
    el.addEventListener('click', () => {
      if (!el.disabled) {
        el.disabled = true
        setTimeout(() => {
          el.disabled = false
        }, binding.value || 3000)
      }
    })
  }
});

export { preventReClick }

2,在main.js中引用

import '@/components/directive/preventReClick.js' // 防多次点击,重复提交指令,路径改为自己的,这里不加from ,不用use

3 在页面上使用

 <a-button @click="endStepHandle" v-preventReClick>结束</a-button>

默认是3秒,如果想要自己传时间,直接写时间就好了

// 传了个2秒
<a-button @click="endStepHandle" v-preventReClick="2000">结束</a-button>
原文地址:https://www.cnblogs.com/ybixian/p/13597828.html