关于vue表单提交防双/多击的例子
先说下出现场景：
测试这次比较极端(也有可能是测试又学会什么新知识了，哈哈)，说是在点击提交和调用之间有可能有狂暴的用户在多连击，就像打游戏一样，调用接口后的loading状态切换就无效了
然后，就只好自己写了个基于vue防多击的指令,小小偷懒了下，我里面已经注入fastClick了，因此响应方法是极快的，因此只需要稍微控制下二次点击的时间即可
export default {}.install = (Vue, options = {}) => {
Vue.directive('dbClick', {
inserted(el, binding) {
el.addEventListener('click', e => {
if(!el.disabled) {
el.disabled = true;
let timer = setTimeout( () => {
el.disabled = false;
},1000)
}
})
}
})
}
用法：
<pr-col hor="center"><mt-button v-dbClick type="primary" @click="saveOrder">保存</mt-button></pr-col>
以上这篇关于vue表单提交防双/多击的例子就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持小牛知识库。
-
我正在做一个Django项目，其中一个表单不会提交。我发现罪魁祸首是一些JavaScript，它格式化了货币输入（当我移除JS或移除输入时，它提交） 这是我的简化表单--JS来自html5货币/货币输入
-
问题内容： 我有2页： page1.php： -具有带文本框和“提交”按钮的表单。例如： -用于将文本框的值存储到数据库的php和mysql代码。将值提交到数据库后，JavaScript会将页面重定向到。例如： page2.php -mysql从数据库检索数据并显示在此页面上。 问题： 当我按“后退”按钮时，浏览器将弹出警告消息，提示您将重新提交表单。单击“返回”按钮时如何防止重新提交表单？我是否
-
问题内容： 我一直在尝试React。在我的实验中，我正在使用Reactstrap框架。当我单击按钮时，我注意到HTML表单已提交。有没有一种方法可以防止单击按钮时提交表单？ 我在这里重新创建了我的问题。我的表单很基本，看起来像这样： 我想念什么？ 问题答案： 我认为首先要注意的是，如果没有javascript（纯HTML），则在单击或时会提交元素。在javascript中，您可以通过使用事件处理程
-
本文向大家介绍一个JavaScript防止表单重复提交的实例，包括了一个JavaScript防止表单重复提交的实例的使用技巧和注意事项，需要的朋友参考一下
-
不知道你是否曾经看到过一个论坛或者博客，在一个帖子或者文章后面出现多条重复的记录，这些大多数是因为用户重复递交了留言的表单引起的。由于种种原因，用户经常会重复递交表单。通常这只是鼠标的误操作，如双击了递交按钮，也可能是为了编辑或者再次核对填写过的信息，点击了浏览器的后退按钮，然后又再次点击了递交按钮而不是浏览器的前进按钮。当然，也可能是故意的——比如，在某项在线调查或者博彩活动中重复投票。那我们如
-
本文向大家介绍jQuery实现防止提交按钮被双击的方法，包括了jQuery实现防止提交按钮被双击的方法的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了jQuery实现防止提交按钮被双击的方法。分享给大家供大家参考。具体实现方法如下： 希望本文所述对大家的jQuery程序设计有所帮助。