防止多次点击，重复提交

场景：在项目中，网络不好的情况下会多次点击按钮，会造成重复请求，表单提交的时候也会造成多次提交
解决方法：
1：给按钮加上loading样式，接口请求成功取消loading样式
2：新建一个preventReClick.js文件

import Vue from 'vue'

const preventReClick = Vue.directive('preventReClick', {

    inserted: function (el, binding) {
        el.addEventListener('click', () => {
            if (el.style.pointerEvents !== "none") {
                el.style.pointerEvents = "none"
                setTimeout(() => {
                    el.style.pointerEvents = ""
                },2000)
            }
        })
    }
});

export { preventReClick }

在main.js中全局引入

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import Vant from 'vant'
import 'vant/lib/index.css'
import {preventReClick} from './apis/preventReClick.js' //防多次点击，重复提交
Vue.use(Vant)
import axios from 'axios'
Vue.prototype.$http = axios
Vue.prototype.$preventReClick = preventReClick
new Vue({
    router,
    store,
    render: h => h(App)
}).$mount('#app')

在vue文件中就可以直接使用

 <div>
   <div @click="click" v-preventReClick></div> 
 </div>