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. Jmeter函数助手—自带方法

    1.${__time()}---->当前时间,一串数字格式 2.${__time(yyyy-MM-dd)}----->当前日期,年-月-日格式 3.${__time(yyyy-MM-dd ...

  2. CF Round #600 (Div 2) 解题报告(A~E)

    CF Round #600 (Div 2) 解题报告(A~E) A:Single Push 采用差分的思想,让\(b-a=c\),然后观察\(c\)序列是不是一个满足要求的序列 #include< ...

  3. IIS添加MIME类型.woff/.svg/.woff2/.eot/.otf.ttf

    IIS添加MIME类型: 文件扩展名 MIME类型 .svg     image/svg+xml.woff   application/x-font-woff.woff2 application/x- ...

  4. 一道经典的Java面试题:equals ,== 和hashcode()的区别

    一句话区别:==比较的是内存地址,equals比较的是值内容 结论: 从以下三点展开: 基本数据类型.字符串.对象 对于基本数据类型:只有==,没有equals. 对于字符串:==比较的是内存地址,e ...

  5. Python 3.X 练习集100题 03

    一个整数,它加上 100 后是一个完全平方数,再加上 168 又是一个完全平方数,请问该数是多少? import math for i in range(10000): n1 = math.sqrt( ...

  6. zabbix 搭建 mysql 连接报错

    如图所示: 查看 MySQL的配置文件 [root@zbxtest ~]# cat /etc/my.cnf [mysqld] datadir=/data/mysql socket=/data/mysq ...

  7. mknod命令的使用

    1.mknod命令 在Linux系统下,mknod命令可用于系统下字符设备文件和块设备文件的创建. (1)命令语法 mknod(选项)(参数) (2)常用选项说明 -Z:设置安全的上下文. -m:设置 ...

  8. CloseableHttpClient方式配置代理服务器访问外网

    小编最近在负责银行内部项目.其中有模块需要访问天眼查API接口,但由于公司全部内网,所以需要配置代理服务器才可以访问外网接口. 又到了激动人心的上码时刻! public void Connect(Ht ...

  9. Python3第三方组件最新版本追踪实现

    一.说明 在安全基线中有一项要求就是注意软件版本是否是最新版本,检查是否是最新版本有两方面的工作一是查看当前使用的软件版本二是当前使用软件的最新版本.在之前的“安全基线自动化扫描.生成报告.加固的实现 ...

  10. 028 ElasticSearch----全文检索技术03---基础知识详解01-IK分词器和映射

    1.IK分词器 (1)安装 使用IK分词器可以实现对中文分词的效果.下载IK分词器:(Github地址:https://github.com/medcl/elasticsearch-analysis- ...