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

比眉伴天荒 2023-01-20 13:48 159阅读 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 条评论，159人围观）

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

相关阅读

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

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

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

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

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

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

相关 vue 自定义指令

项目中使用指令的情景是“有无权限” ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nL

灰太狼/ 2022年11月04日 12:29/ 0 赞/ 202 阅读

相关 vue 自定义指令

除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。注意，在 Vue2.0 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你

男娘i/ 2022年04月03日 04:30/ 0 赞/ 339 阅读

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

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

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

相关小程序防止重复点击

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

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

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

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

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

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

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

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

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

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

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

相关 vue防止频繁点击

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

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