vue防止频繁点击

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 || 1000)
            }
        })
    }
});

export default { preventReClick }

**********************************************************

main.js

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
// import Mint from "mint-ui";
// import "mint-ui/lib/style.css";
// Vue.use(Mint);
import Vant from "vant";
import "vant/lib/index.css";
Vue.use(Vant);
import { Toast } from "vant";
Vue.prototype.$Toast = Toast;
Vue.config.productionTip = false;

//验证是否登录
import './utils/permission.js';
//防多次点击，重复提交
import preventReClick from './utils/preventReClick.js';

new Vue({
  router,
  store,
    preventReClick,
  render: h => h(App)
}).$mount("#app");

************************************************************************

vue文件中使用

<template>
    <div class="main-para">
        <van-nav-bar title="订单" class="public-title" left-arrow @click-left="onClickLeft" />
        <div class="main">
            <button type="button" name="" @click="onClickSearch"  v-preventReClick>搜索</button>
        </div>
    </div>
</template>