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>