美文网首页
vue防止按钮在短时间内被多次点击的方法

vue防止按钮在短时间内被多次点击的方法

作者: 双耳云 | 来源:发表于2019-06-14 16:18 被阅读0次

1.vue组件

import Vue from '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);
    }
  })
})()

2.使用

2.1在script中引用

import clickStatefrom '../../js/clickState'

2.2在html中引用

<el-button type="primary" size="small" v-intervalclick='{func:reset,time:5000,}'>重置</el-button>

相关文章

  • vue防止按钮在短时间内被多次点击的方法

    1.vue组件 2.使用 2.1在script中引用 2.2在html中引用

  • Android 防误触

    防止按钮短时间内多次点击。使用kotlin扩展方法,限制500毫秒内点击一次。 调用处

  • flutter 禁止连续点击按钮的封装

    在开发中按钮如果被多次点击,会触发多次事件,想要封装一个按钮能够在短时间内禁止多次点击。 思路 使用延时方法 改变...

  • Ajax避免重复提交

    为防止用户在短时间内多次点击按钮触发提交方法,在ajax方法触发的前面加入下面两行代码(id名改为自己定义的按钮的):

  • js 防抖debounce与节流throttle(简述)

    防抖debounce 顾名思义防止用户点击按钮的时候抖动,短时间内触发多次按钮事件。在触发事件的n秒后执行,如果在...

  • vue 中防止用户频繁点击按钮

    在后台项目中遇到一个一防止用户短时间内多次点击按钮的需求,主要的思路就是使用的vue的自定义指令设置延时,然后全局...

  • vue防止按钮多次点击

    当用户快速点击提交按钮时,会发送多个请求,为了防止这个问题,需要对按钮进行多次的连续点击是事件: 1、在utils...

  • 防止按钮被多次点击

    经常有测试妹妹跟我说,我快速点击了这个按钮两次,咋就连着push了两个界面,这两个界面还一样(尤其当手机比较卡顿的...

  • web vue项目优化

    通过自定义命令,防止短时间内多次点击调用搜索 自定义指令 vue中的事件委托 视图通过route.meta..Ke...

  • 防止按钮多次重复点击

    为了防止测试或者用户频繁点击某个按钮,导致程序在短时间内进行多次数据提交or数据处理,那到时候就比较坑了~ 那么如...

网友评论

      本文标题:vue防止按钮在短时间内被多次点击的方法

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