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

比眉伴天荒 2023-01-20 13:48 273阅读 0赞

## PS：参考这篇博客的方法：[原博][Link 1]，亲测有效！！ ##

## 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 '@/utils/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> //带多个叁

[Link 1]: https://www.cnblogs.com/xiao-wu-gui/p/12915855.html

发表评论取消回复

表情：

评论列表（有 0 条评论，273人围观）

还没有评论，来说两句吧...

相关阅读

相关 js中防止重复点击，重复提交

利用延时器 setTimeout; 防止重复点击可以添加一个开关,让这个开关默认为true，第一次点击将其变为false,点击事件的执行需要判断这个开关是否为true，为t

叁歲伎倆/ 2023年06月17日 10:57/ 0 赞/ 58 阅读

相关 vue自定义指令

示例：我们注册一个全局的v-focus指令 <div id="app"> <p>页面载入时，input 元素自动获取焦点：</p> <

朱雀/ 2023年03月06日 03:56/ 0 赞/ 281 阅读

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

PS：参考这篇博客的方法：[原博][Link 1]，亲测有效！！ 1、创建preventReClick.js文件 import Vue from 'vue'

比眉伴天荒/ 2023年01月20日 13:48/ 0 赞/ 274 阅读

相关 vue防止多次点击（暴力点击）

工具类noDbClick.js export default { }.install = (Vue, options = { }) => { V

╰+哭是因爲堅強的太久メ/ 2022年12月26日 10:11/ 0 赞/ 289 阅读

相关小程序按钮防止重复点击

最近做小程序网不好时提交会多次点击，造成多次请求，有很多无用数据，这里记录一下解决方法方法一 //wxml文件 <button disabled=“{

怼烎@/ 2022年02月26日 10:24/ 0 赞/ 564 阅读

相关小程序防止重复点击

util.js ![ContractedBlock.gif][] ![ExpandedBlockStart.gif][] // 防抖节流防止重复点击 fu

落日映苍穹つ/ 2021年11月27日 04:58/ 0 赞/ 427 阅读

相关 AOP自定义注解实现防重复点击

AOP自定义注解实现防重复点击一、引言二、实现方案三、具体实现 1.

小鱼儿/ 2021年09月27日 17:12/ 0 赞/ 339 阅读

相关 ReactNative防止重复点击工具类

可将此代码放入到有个工具类，js文件中 / Created by wayne on 2017/6/7. 防止重复点击工具类，目前时间定为3秒

﹏ヽ暗。殇╰゛Y/ 2021年09月20日 00:34/ 0 赞/ 529 阅读

相关 vue防重复点击(指令实现)

快速点击按钮会重复多次调用接口，防止出现这样的情况全局定义，方便调用 1.新建plugins.js export default { instal

亦凉/ 2021年09月18日 05:30/ 0 赞/ 457 阅读

相关 vue防止频繁点击

preventReClick.js import Vue from 'vue' const preventReClick = Vue.directive('preventR

忘是亡心i/ 2021年09月08日 17:40/ 0 赞/ 537 阅读