关于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表单提交防双/多击的例子就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。
相关推荐
-
解决在Vue中使用axios用form表单出现的问题
vue中使用Axios第三方库,采用形式提交,参数格式为multipart /格式数据 ,请求参数变为对象格式的解决办法.(推荐第二种方法) 提交数据的四种编码方式 一,应用/ X WWW的窗体-urlencoded 这应该是最常见的后编码方式,一般的表单提交默认以此方式提交.大部分服务器语言对这种方式都有很好的支持.在PHP中,可以用$ _ POST ["钥匙"]的方式获取到关键的值,在节点中我们可以使用查询字符串中间件对参数进行分离 app.post("/server&q
-
vue 解决form表单提交但不跳转页面的问题
vue使用@submit.prevent=""来设置提交时执行的函数,并阻止页面跳转: <form id="msgForm" action="" method="post" @submit.prevent="sub"> sub函数写在methods内: methods:{ $.post('http://api.test.ai/visitorinfo/', $('#msgForm').serial
-
关于vue表单提交防双/多击的例子
先说下出现场景: 测试这次比较极端(也有可能是测试又学会什么新知识了,哈哈),说是在点击提交和调用之间有可能有狂暴的用户在多连击,就像打游戏一样,调用接口后的loading状态切换就无效了 然后,就只好自己写了个基于vue防多击的指令,小小偷懒了下,我里面已经注入fastClick了,因此响应方法是极快的,因此只需要稍微控制下二次点击的时间即可 export default {}.install = (Vue, options = {}) => { Vue.directive('dbClick'
-
Vue表单提交点击事件只允许点击一次的实例
常用出现场景:商城点击订单提交 1.使用Vue封装事件 body: <template> <div> <el-button @click.once="submitOrder()">提交订单</el-button> </div> </template> 方法: methods: { submitOrder() { // 处理逻辑 } } 2.使用原生JS事件 在数据data里面声明一个flag属性 data() {
-
PHP实现表单提交数据的验证处理功能【防SQL注入和XSS攻击等】
本文实例讲述了PHP实现表单提交数据的验证处理功能.分享给大家供大家参考,具体如下: 防XSS攻击代码: /** * 安全过滤函数 * * @param $string * @return string */ function safe_replace($string) { $string = str_replace('%20','',$string); $string = str_replace('%27','',$string); $string = str_replace('%2527',
-
Vue form 表单提交+ajax异步请求+分页效果
废话不多说了,直接给大家贴代码了,具体代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <meta charset="UTF-
-
Laravel 中使用 Vue.js 实现基于 Ajax 的表单提交错误验证操作
本教程基于Laravel 5.4 开始之前首先准备好开发环境,我们假设你已经安装好 Laravel,至于 Vue 的引入,请参考官方文档. 做好上述准备工作后就可以开始我们的开发了,本教程中我们将演示文章发布页面的表单 验证 . 首先在 routes/web.php 中新增两条路由规则: Route::get('post/create', 'PostController@create'); Route::post('post/save', 'PostController@save'); 然后在项
-
vue axios 表单提交上传图片的实例
项目中用的element 的框架,然后在项目有一个添加数据需求是图片可上传,也可不上传, 然后问题就是element 中的上传控件在没有图片的时候是不会触发提交的,但接口写的是有file的 multipart/form-data 接收模式 所有只能自己另个模仿一个表单上传 <input class="file" name="file" type="file" accept="image/png,image/gif,imag
-
vue form 表单提交后刷新页面的方法
最近做的项目中,有增删改表格功能,在操作后需要实时更新页面数据.下面可以这样解决. 1.在methods中 定义好一个初始化渲染实例. 例如 lnitializationData(){//初始化页面数据 this.$http.get("/permit/specific", { params: { page: this.localPage, size: this.msg.pagNumber, } }, {emulateJSON: true} ).then((response) =>
-
vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作
在项目中做联系人的添加和编辑功能,点击父级页面的添加和编辑按钮,用的是同一个表单弹窗,数据添加和编辑用同一个弹窗,没有在弹窗使用v-if,性能不是很好,弹窗中有表单,在编辑弹窗表单数据之后关闭弹窗,然后点击添加的时候,弹窗里的表单数据还是之前编辑的数据,无法做到清空表单数据,接下来是解决方法了,嘿嘿 首先是不管是添加还是编辑,都需要将子组件需要的对象属性一一写出来,传给子组件, 然后是主要用到了el-form表单有一个清空重置表单数据的事件方法resetField(),在子组件表单弹窗打开的时候
-
Vue使用Post进行表单提交
目录 使用Post进行表单提交 vue中使用Post问题 使用Post进行表单提交 下面就是使用Vue提交表单的方法 submitForm(event) { event.preventDefault(); let formData = new FormData(); formData.append('id', this.param.id); formData.append('categoryName', this.param.namee); formData.append('descriptio
随机推荐
- Java截取url参数的方法
- ios原生二维码扫描
- IE7中javascript操作CheckBox的checked=true不打勾的解决方法
- Bootstrapvalidator校验、校验清除重置的实现代码(推荐)
- asp.net编程实现删除文件夹及文件夹下文件的方法
- 在Framework4.0中实现延迟加载的实现方法
- ThinkPHP 整合Bootstrap Ajax分页样式
- 在JSP中处理虚拟路径
- C 语言指针变量详细介绍
- MySql 5.5.29绿色安装教程详解
- Android仿淘宝商品浏览界面图片滚动效果
- php中如何同时使用session和cookie来保存用户登录信息
- vue.js实现备忘录功能的方法
- window.event.keyCode兼容IE和Firefox实现js代码
- 用asp实现批量删除bak文件
- Linux shell编程中IO和条件及循环处理的细节问题讨论
- SQLServer中数据库文件的存放方式,文件和文件组
- Android 夜间模式的实现代码示例
- iOS实现带有缩放效果的自动轮播图
- 30分钟快速带你理解iOS中的谓词NSPredicate