方法一:【延时触发事件,短时间内不能重复点击】
创建一个preventReClick.js文件:
import Vue from 'vue'
const preventReClick = function(){
let openDalay = false
//不传参点击事件
Vue.directive('click',function(el,binding){
el.οnclick=function(e){
if(openDalay) return;
openDalay = !openDalay
setTimeout(()=>{
openDalay = !openDalay
},1000)
binding.value()
}
})/*传参的点击事件*/
Vue.directive('preventDbClick',function(el,binding){
el.οnclick=function(e){
if(openDalay) return;
openDalay = !openDalay
setTimeout(()=>{
openDalay = !openDalay
},1000)
binding.value.func(binding.value.data)
}
});
}export default preventReClick
main.js中引用:
import preventReClick from 'js/preventReClick'
Vue.use(preventReClick)
.vue文件template中:
<div v-preventDbClick="{func:submitGo,data:[1,2,3]}">提交</div>
methods方法中:
submitGo(data){
console.log(data)/*输出[1,2,3]*/
}
方法二:【改变按钮加载状态,请求成功后才能再次点击】
<el-button :loading="isLoading" @click="test('a')">点击</el-button>
test(data){
this.isLoading=true;
console.log('-------')如果有请求,这里调用请求接口,代替setTimeout,请求成功后设置this.isLoading=false
setTimeout(()=>{
this.isLoading=false;
console.log(data)
},1000)
},