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>
