vue 如何处理防止按钮重复点击问题

目录
  • 处理防止按钮重复点击
  • vue防止重复执行点击事件
    • 方法一：在规定时间内将按钮禁用的方法
    • 方法二：用指令的方式实现，全局注册

处理防止按钮重复点击

1.在button上绑定动态的disabled

<el-button type="primary" size="mini" @click="testCode" :disabled="codeDisabled">发送验证码</el-button>

2.在data中定义

codeDisabled: false,

3.在点击事件里加入定时器，60000为1分钟不能重复点击

 testCode() {
      this.codeDisabled = true
      setTimeout(()=>{
        this.codeDisabled = false;
      },60000)
  }

vue防止重复执行点击事件

在vue项目中防止用户在一定时间内频繁点击按钮触发事件

方法一：在规定时间内将按钮禁用的方法

主要思想就是禁止用户在一定的时间多次点击，在一定时间内将按钮禁用，用定时器实现，一定时间之后用户可再次点击。

<template>
  <div>
      <div @click="clickHandle()">我是点击事件</div>
  </div>
</template>
 
<script>
export default {
  components: {},
  data () {
    return {
      isDisabled: false,
    };
  },
  methods: {
      clickHandle(){
          this.isDisabled = true;
          setTimeout(()=>{
              this.isDisabled = false;
          },3000)
      }
  },
}
</script>

方法二：用指令的方式实现，全局注册

export default {
    install(Vue) {
        // 防止重复点击
        Vue.directive('preventReClick', {
            inserted(el, binding) {
                el.addEventListener('click', () => {
                    if (!el.disabled) {
                        el.disabled = true;
                        setTimeout(() => {
                            el.disabled = false;
                        }, binding.value || 1000)
                    }
                })
            }
        })
    }
}

1. 在main.js中引入上面的js文件

// 防止多次点击
import preventReClick from './common/utils/utils'
Vue.use(preventReClick);

2. 在触发事件的按钮上就可以直接使用指令

<div class="comment-btn" @click="submitMes()" v-preventReClick="3000">发送</div>

3. 3秒之后 按钮下面的事件才可再次触发

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 解决vue路由name同名,路由重复的问题

    在项目中,想让路由后缀为空,或者index的时候,都跳转到路由为index的页面,于是在router中如下配置 routes: [{ path: '/', name: 'index', component: () => import('@/components/index').then(m => m.default) },{ path: '/index', name: 'index', component: () => import('@/components/index').then(

  • Vue路由重复点击报错问题及解决

    目录 vue路由重复点击时会出现报错 局部处理 全局处理 vue 重复点击菜单,路由重复报错解决 报错原因 解决方法 总结 vue路由重复点击时会出现报错 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location:XXX 虽然不影响运行结果,但最好还是处理一下. 局部处理 局部处理是指对单个路由进行处理,其他的路由依旧报错. 在路由跳转的push语句中添加catch捕捉

  • vue 如何处理防止按钮重复点击问题

    目录 处理防止按钮重复点击 vue防止重复执行点击事件 方法一:在规定时间内将按钮禁用的方法 方法二:用指令的方式实现,全局注册 处理防止按钮重复点击 1.在button上绑定动态的disabled <el-button type="primary" size="mini" @click="testCode" :disabled="codeDisabled">发送验证码</el-button> 2.在d

  • Vue如何防止按钮重复点击方案详解

    目录 前言 目的 文件结构 实现 请求拦截 响应拦截 取消重复发送请求 调用 前言 Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中. axios 是目前最优秀的 HTTP 请求库之一, 我们封装 axios 请求也是为了让代码看的更加清晰, 后期好维护. 目的 实现请求拦截 实现响应拦截 常见错误处理 不能请求头设置 api 集中式管理 (取消重复请求,重复发送请求, 请求缓存等情况均还未实现) 文件结构 实现 index.js内代码如下: 引入

  • Vue中的全局指令防止按钮重复点击

    目录 全局指令防止按钮重复点击 1.common.js 2.在需要引入的页面引入(**.vue) 防重复点击(vue指令实现) 阻止快速点击按钮会重复多次调用接口的 全局指令防止按钮重复点击 1.common.js 首先引入Vue import Vue from 'vue'; const preventReClick = Vue.directive('preventReClick', {   inserted: function (el, binding) {     el.addEventLi

  • 对于防止按钮重复点击的尝试详解

    导语:随着接触的项目增加,很多项目都是遇到同样的问题,而每次都是使用一贯的手法进行处理.有时候有些方法并不是那么的优雅甚至有些冗余,所以自己也想开始尝试不同的方法去解决同样的问题. 我经常在项目中会遇到按钮重复点击后引起表单的重复点击问题.所以针对这个问题,自己尝试了几种办法分别去解决.直接上代码. 1.粗暴简单办法 直接定义一个变量,每次点击过后等所有操作结束后释放变量.或使用loading防止用户点击 //* 部分代码 <script> export default { methods:

  • 关于javascript中限定时间内防止按钮重复点击的思路详解

    关于javascript中限定时间内防止按钮重复点击的思路详解

    前面的话 有一天心血来潮,1分钟内重复点击了多次博客园首页的刷新博文列表的刷新按钮.果不其然,ip当时就被禁用了.后来,重启自己的路由器,重新获取ip才可以访问博客园主页.那么,设置一个限定时间内(比如1秒)防止按钮被重复点击的方法会不会更好一点呢? 思路一 最直接的思路可能就是点击按钮后,按钮的事件绑定函数解绑,1s后重新绑定函数 <button id="btn">0</button> <script> btn.onclick = function

  • 实例详解Android解决按钮重复点击问题

    为了防止用户或者测试MM疯狂的点击某个button,写个方法防止按钮连续点击.具体实例代码如下所示: public class BaseActivity extends Activity { protected boolean isDestroy; //防止重复点击设置的标志,涉及到点击打开其他Activity时,将该标志设置为false,在onResume事件中设置为true private boolean clickable=true; @Override protected void on

  • Android 快速实现防止网络重复请求&按钮重复点击的方法

    在日常开发过程中,偶尔会出现一些极端问题.比如 网络重复请求,很难过滤 请求的问题. 下面一段代码,可以解决这个重复请求的问题. 下面上一段代码: private long lastClick; // 防止网络重新请求 if (System.currentTimeMillis() - lastClick <= 1000) { return; } lastClick = System.currentTimeMillis(); 以上这篇Android 快速实现防止网络重复请求&按钮重复点击的方法

  • Android防止按钮重复点击示例代码

    Android防止按钮重复点击示例代码

    本文中我将介绍一下我自己封装的一个小的工具类库:按钮点击事件类库. 作用:该类库可以防止按钮重复点击,可以判断网络状态,可以判断用户登录状态,以及自定义验证条件等等. 说明:其实现的核心原理就是通过自定义实现自身的OnClickListener类,并重写其中的onClick方法,在onClick方法中执行相应的判断逻辑之后回调我们自定义的抽象方法. 具体效果如下图所示: 使用方式 屏蔽多次点击事件 /** * 测试快速点击事件 */ fastButton.setOnClickListener(n

  • Android优雅地处理按钮重复点击的几种方法

    App中,有很大一部分场景是点击按钮,向服务端提交数据,由于网络请求需要时间,用户很可能会多次点击,造成数据重复提交,造成各种莫名其妙的问题. 因此,防止按钮多次点击,是Android开发中一个很重要的技术手段. 以前的处理方式 网上查找到的,或者你可能会想到的方法大概有这些: 1.每个按钮点击事件中,记录点击时间,判断是否超过点击时间间隔 private long mLastClickTime = 0; public static final long TIME_INTERVAL = 1000

  • Android 防止多次重复点击的三种方法的示例

    在项目中经常会遇到对按钮.自定义控件的 Item 等防止多次重复的点击的问题,下面做一个小结. 方法1:使用 RxJava 的 throttleFirst() 具体代码如下: /** * 防止重复点击 * * @param target 目标view * @param listener 监听器 */ public static void preventRepeatedClick(final View target, final View.OnClickListener listener) { R

随机推荐