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. Centos7安装MySQL(多图)

    文章目录 一.在线安装1.替换网易yum源2.清理缓存3.下载rpm文件4.安装MySQL数据库二.本地安装1.上传MySQL安装包2.安装依赖的程序包3.卸载mariadb程序包4.安装MySQL程 ...

  2. opencv4.0.0+cmake编译(含contrib)

    https://blog.csdn.net/bobo184/article/details/88749651 前言笔者环境:win10+vs2015+cmake3.8.2 介绍下4.0.0的新特性,沿 ...

  3. Python3 异常

    异常 --- 程序执行时产生的事件,为Python对象 <Python学习手册>笔记 异常总是通过实例对象来识别 默认的异常处理器 --- 打印标准出错信息(包括引发的异常和堆栈跟踪-异常 ...

  4. 深入js系列-语法

    语法 语句和表达式 我们用英语的术语来说明它们的区别 "句子"(sentence)是完整表达某个意思的一组词,由一个或多个"短语"(phrase)组成,它们之间 ...

  5. 第10组 Beta冲刺(2/4)

    队名:凹凸曼 组长博客 作业博客 组员实践情况 童景霖 过去两天完成了哪些任务 文字/口头描述 编写商品主界面 展示GitHub当日代码/文档签入记录 暂无代码 接下来的计划 编写购买功能 还剩下哪些 ...

  6. 使用 udev 进行动态内核设备管理(转自suse文档)

    第 12 章使用 udev 进行动态内核设备管理¶ 目录 12.1. /dev 目录 12.2. 内核 uevents 和 udev 12.3. 驱动程序.内核模块和设备 12.4. 引导和启动设备设 ...

  7. linux复制文件夹、重命名文件夹、删除文件夹

    linux中复制命令为cp(即copy缩写),重命名使用mv命令(即move缩写)来实现,删除命令为rm(即remove缩写). 如果操作对象是单个文件,复制和删除以及重命名很简单,如下: cp a. ...

  8. 第9课 C++异常处理机制

    一. 回顾C++异常机制 (一)概述 1. 异常处理是C++的一项语言机制,用于在程序中处理异常事件(也被称为导常对象). 2. 异常事件发生时,使用throw关键字抛出异常表达,抛出点称为异常出现点 ...

  9. 微慕WordPress小程序增强版

    2017年1月9日,张小龙在2017微信公开课Pro上发布的微信小程序正式上线.在过去的2年多的时间里,微信小程序领头,各大互联网平台也不甘落后,陆续推出自己的小程序.2018年7月4日,百度智能小程 ...

  10. 在导入pytorch时libmkl_intel_lp64.so找不到

    安装或者更新完pytorch后,运行不了,显示错误: (base) xu@xusu:~$ python Python (default, Dec , ::) [GCC ] :: Anaconda, I ...