vue防止按钮重复点击自定义指令vue防止按钮重复点击自定义指令，新建一个preventRepeatClick.js文件

directives文件下，新建一个preventRepeatClick.js文件

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

在入口文件（main.js）下全局引入

import preventReClick from '../directives/preventRepeatClick';
Vue.use(preventReClick);

使用

<el-button v-preventReClick>a按钮</el-button>
<el-button v-preventReClick="2000" type="primary">b按钮</el-button>