封装一个自定义指令防止按钮重复提交。欢迎指正！
1、创建preventReClick.js文件
import Vue from 'vue'
const preventReClick = function(){
let openDalay = false
//不传参点击事件
Vue.directive('click',function(el,binding){//不带参数
el.onclick=function(e){
if(openDalay) return;
openDalay = !openDalay
setTimeout(()=>{
openDalay = !openDalay
},1000)
binding.value()
}
})
Vue.directive('DataClick',function(el,binding){ //带参数
el.onclick=function(e){
if(openDalay) return;
openDalay = !openDalay
setTimeout(()=>{
openDalay = !openDalay
},1000)
binding.value.func(...binding.value.data)
}
} );
}
export default preventReClick
2、main.js引入
import preventReClick from './assets/js/preventReClick'
Vue.use(preventReClick)
3、页面中应用
<div class="share" v-click="share"> </div> //不带参
<div class="xq_center" v-DataClick="{func:tabbar_btn,data:'a'}"></div> //带一个参
<div class="buy_center" v-DataClick="{func:tabbar_btn,data:['b',0,'9']}"></div> //带多个叁
