美文网首页程序员
vue自定义指令防止重复点击

vue自定义指令防止重复点击

作者: 竿牍 | 来源:发表于2020-06-15 18:48 被阅读0次

封装一个自定义指令防止按钮重复提交。欢迎指正!

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> //带多个叁

相关文章

网友评论

    本文标题:vue自定义指令防止重复点击

    本文链接:https://www.haomeiwen.com/subject/gvmhxktx.html