vue组件

  (function(){
let openDelay=false;
Vue.directive('intervalclick', function(el,binding){
el.onclick=function(e){
if(openDelay)return;
openDelay=!openDelay;
if (!binding.value) {
alert("未传入Value数据!");
return;
}
let func = binding.value['func'];
let time=binding.value['time'];
if(typeof time !=='number'){
alert("传入等待时间错误");
return;
}
let args=[];
for (const key in binding.value) {
if (binding.value.hasOwnProperty(key)) {
if(key==='func'||key==='time')continue;
args.push(binding.value[key])
}
}
setTimeout(() => {
openDelay=!openDelay;
}, time);
func(...args);
}
})
})()

使用

 <button v-intervalclick='{func:执行方法,time:间隔时间(毫秒数),...执行方法所需要的参数}'>点击</button>

vue防止按钮在短时间内被多次点击的方法的更多相关文章

  1. 【Javascript Demo】防止按钮在短时间内被多次点击

    如果一个按钮可以在短时间内多次点击,那么有可能会被用户恶意点击,为防止这种情况,可以设定一定时间内只能点击一次,其他时间禁止点击按钮. 1.效果如下:     2.代码如下:   <div> ...

  2. (转载)Android之有效防止按钮多次重复点击的方法(必看篇)

    为了防止测试妹子或者用户频繁点击某个按钮,导致程序在短时间内进行多次数据提交or数据处理,那到时候就比较坑了~ 那么如何有效避免这种情况的发生呢? 我的想法是,判断用户点击按钮间隔时间,如果间隔时间太 ...

  3. 点击按钮文字变成input框,点击保存变成文字

    <!DOCTYPE html><html lang="en"> <head> <meta http-equiv="Content ...

  4. vue获得当前页面URL动态拼接URL复制邀请链接方法

    vue获得当前页面URL动态拼接URL复制邀请链接方法 当前页面完整url可以用 location.href路由路径可以用 this.$route.path路由路径参数 this.$route.par ...

  5. vue项目初始化时npm run dev报错webpack-dev-server解决方法

    vue项目初始化时npm run dev报错webpack-dev-server解决方法 原因:这是新版webpack存在的BUG,卸载现有的新版本webpack,装老版本就好webpack-dev- ...

  6. jQuery实现提交按钮点击后变成正在处理字样并禁止点击的方法

    本文实例讲述了jQuery实现提交按钮点击后变成正在处理字样并禁止点击的方法.分享给大家供大家参考.具体实现方法如下: 这里主要通过val方法设置按钮的文字,并用attr方法修改disabled属性实 ...

  7. 学霸笔记系列 - Python Selenium项目实战(一)—— 怎么去验证一个按钮是启用的(可点击)?

    Q: 使用 Python Selenium WebDriver 怎么去验证一个按钮是启用的(可点击)? A:Selenium WebDriver API 里面给出了解决方法is_enabled() 使 ...

  8. js实现点击按钮时显示弹框,点击按钮及弹框以外的区域时隐藏弹框

    转自https://blog.csdn.net/yimawujiang/article/details/86496936 问题:js实现点击按钮时显示弹框,点击按钮及弹框以外的区域时隐藏弹框? 方案一 ...

  9. vue.js 中使用(...)运算符报错的解决方法

    vue.js 中使用(...)运算符报错的解决方法 Syntax Error:Unexpected token(XX:X) }, computed:{ ...mapGetters([ 'pageSiz ...

随机推荐

  1. 小试cordova

    Cordova就是以前的PhoneGap捐献给Apache的最新开源版本. 安装一定要走npm网络方式,需要装Node.js,npm(windows nodejs安装包包含npm),Git.因为必须要 ...

  2. php仿经典省市县三级联动

    之前有个需求要写个类似省市县三级联动的页面,于是,网上找了点资料看了下,其实原理很简单: 当我们选择一级栏目中某条记录的时候,会获取该栏目的vaule值,并发起ajax请求,后台根据这个vaule值, ...

  3. Naive RNN vs LSTM vs GRU

    0 Recurrent Neural Network 1 Naive RNN 2 LSTM peephole Naive RNN vs LSTM 记忆更新部分的操作,Naive RNN为乘法,LSTM ...

  4. 使用Android Studio Gradle实现友盟多渠道打包

    最新项目中要求在友盟后台看到不同渠道的统计,Android大大小小的应用市场要几百个,要一个一个手工打包那一天也干不完,还好是有大牛的,弄出了好多解决方法,就Gradle做一下记录和分享,首先看一些理 ...

  5. 如何避免 await/async 地狱

    原文地址:How to escape async/await hell 译文出自:夜色镇歌的个人博客 async/await 把我们从回调地狱中解救了出来,但是如果滥用就会掉进 async/await ...

  6. 老司机告诉你高质量的Java代码是怎么练成的?

    一提起程序员,首先想到的一定是"码农",对,我们是高产量的优质"码农",我们拥有超跃常人的逻辑思维以及不走寻常路的分析.判别能力,当然,我们也有良好的编码规范, ...

  7. 30岁天才上班族利用Python人脸监控BOSS,伪装成认真上班的样子!

    如今Python程序员可以做深度学习算法实现人脸识别,得益于国外开源框架,虽然它不能达到face++和众多人脸识别公司,但实际应用并没有受到太大的压力.下图为tensorflow的5点定位加情感测试. ...

  8. 第6次结对作业--郑锦伟&古维城

    第6次结对作业 在线英语学习平台客户端原型 1.结对成员 郑锦伟 2015034643034 古维城 2015034643033 2.原型设计工具实现-Photoshop 3.需求分析 使用NABCD ...

  9. mybatis源码解读(五)——sql语句的执行流程

    还是以第一篇博客中给出的例子,根据代码实例来入手分析. static { InputStream inputStream = MybatisTest.class.getClassLoader().ge ...

  10. ajax基本介绍

    AJAX即"Asynchronous Javascript And XML"(异步JavaScript和XML[Extensible Markup Language] ),是指一种 ...