场景:在项目中,网络不好的情况下会多次点击按钮,会造成重复请求,表单提交的时候也会造成多次提交
解决方法:
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>