1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<template>
 <button @click="submit()" :disabled="isDisable">点击</button>
</template>
<script>
 export default {
  name: 'TestButton',
  data: function () {
   return {
    isDisable: false
   }
  },
  methods: {
   submit() {
    this.isDisable = true
    setTimeout(() => {
     this.isDisable = false
    }, 1000)
   }
  },
 }
</script>

这里我们通过控制isDisable 来设置 disabled来控制按钮的点击和不可点击。 默认isDisable:的值为 false,按钮可以点击。 当我们点击这个按钮的时候,首先将按钮的绑定isDisable设置为true,1秒后立马将其置为false。

所以用户必须1秒后才能再次点击,那个时候,模态框已经关闭了。可以设置为1500合适

解决vue多次提交的更多相关文章

  1. java web解决表单重复提交问题

    我们大家再进行web开发的时候,必不可少会遇见表单重复提交问题.今天就来给总结如何解决表单提交问题,欢迎大家交流指正. 首先我们在讨论如何解决表单重复提交问题之前先来解决三个问题:1.什么叫表单重复提 ...

  2. php解决表单重复提交

    php解决表单重复提交时间:2015-2-28 | 评论:1条评论 | 被查看了 189 次 | 标签:php, W3cui重复提交是我们开发中会常碰到的一个问题,除了我们使用js来防止表单的重复提交 ...

  3. 使用js控制表单重复提交(1加锁,2事件方式,3 EasyUI中解决表单重复提交)

    方法一. var flag = true; $(function() { $("#interested").click(function() { beInterested(); } ...

  4. 解决vue数据渲染过程中的闪动问题

    关键代码 主要解决vue双大括号{{}}在数据渲染和加载过程中的闪动问题,而影响客服体验. html代码: <span class="tableTitle selftab" ...

  5. 解决vue单页路由跳转后scrollTop的问题

    作为vue的初级使用者,在开发过程中遇到的坑太多了.在看页面的时候发现了页面滚动的问题,当一个页面滚动了,点击页面上的路由调到下一个页面时,跳转后的页面也是滚动的,滚动条并不是在页面的顶部 在我们写路 ...

  6. 解决 vue 的缩进问题 及 vue 的 sass 调用 mixin 函数

    1.解决 vue 的缩进问题 配置 eslint , 只要要eslint 对应的值为 0,则 eslint 将不会对其进行检测 (.eslintrc.js  --  rules ) A. 不检测 缩进 ...

  7. Struts2中解决表单重复提交

    3. 表单的重复提交问题 1). 什么是表单的重复提交 > 在不刷新表单页面的前提下:  >> 多次点击提交按钮 >> 已经提交成功, 按 "回退" ...

  8. eclipse中修改tomcat的配置,解决全局性的get提交乱码问题

    在项目中如果页面提交方式为get的时候,中文会出现乱码. 为了解决乱码问题我们有两种办法. 第一种:在程序中加入get提交乱码的解决 String username = new String(user ...

  9. 解决jsp两种提交方式乱码 的方法

    解决中文乱码 ---post提交方式  需要在处理页面添加request.setCharacterEncoding("utf-8"); 制定请求的编码,调用一下request.ge ...

随机推荐

  1. vue : 无法加载文件 C:\Users\xxx\AppData\Roaming\npm\vue.ps1

    最近因为电脑太卡,小颖把电脑重装了,重装后再执行 npm install -g @vue/cli 时可能是网络问题,一直不能成功,小颖就把npm指向了淘宝镜像: npm install -g cnpm ...

  2. ORM常用的13个方法

    介绍一个可以以py脚本方式运行ORM操作的方法: 可在项目内新建个py文件,复制项目内manage.py文件中的以下代码: if __name__ == "__main__": o ...

  3. set(集合)的使用方法

    1.普通集合set 直接定义一个set具有动态有序和去重的功效,不再赘述. 如果要实现set时从大到小排序(desc)的,只需要在定义的时候指定“大于符号”,即greater<class> ...

  4. Java代理(静态代理、JDK动态代理、CGLIB动态代理)

    Java中代理有静态代理和动态代理.静态代理的代理关系在编译时就确定了,而动态代理的代理关系是在运行期确定的.静态代理实现简单,适合于代理类较少且确定的情况,而动态代理则给我们提供了更大的灵活性. J ...

  5. python总结八

    1.range的使用讲解: 首先呢如果只是一个参数的话,那么就是循环遍历这个参数递增,例如 range(5)>>[1,2,3,4] 如果是两个参数的话,且注意后面的第二个参数要比第一个大, ...

  6. nginx配置神器

    原文 https://mp.weixin.qq.com/s/zFEk7XzHj3xPReDXEnQxcQ https://nginxconfig.io/ Nginx作为一个轻量级的HTTP服务器,相比 ...

  7. GPG实践

    遇见的问题 安装之后没有显示如教程中的 直接提示真实姓名于电子邮件的地址 公钥与密钥 设置吊销证书

  8. Hive常见错误

    1.root is not allowed to impersonate root 修改etc/hadoop/core-site.xml,增加如下配置: <property> <na ...

  9. SGE部署安装

    1.关闭防火墙 systemctl stop firewalld.service systemctl disable firewalld.service 2.安装SGE依赖包 # yum instal ...

  10. Linux内核device结构体分析

    1.前言 Linux内核中的设备驱动模型,是建立在sysfs设备文件系统和kobject上的,由总线(bus).设备(device).驱动(driver)和类(class)所组成的关系结构,在底层,L ...