关于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
随机推荐
- 使用js显示当前时间示例
- jquery隐藏标签和显示标签的实例
- VUEJS实战之构建基础并渲染出列表(1)
- React操作真实DOM实现动态吸底部的示例
- 手工注射php学习
- Python计算程序运行时间的方法
- 揭秘在ListView等AdapterView上动态添加删除项的陷阱
- 利用transition实现文字上下抖动的效果
- jquery异步循环获取功能实现代码
- sql2000报错Successfully re-opened the local eventlog解决方法
- sql server2012附加数据库问题解决方法
- php+mysql不用递归实现的无限级分类实例(非递归)
- js中hash和ico的关联分析
- spring配置扫描多个包问题解析
- android开发 eclipse alt+”/”自动提示失效的解决方法
- C#引用类型转换的常见方式总结
- vue router-link传参以及参数的使用实例
- javascript数组拍平方法总结
- 网页爬虫之cookie自动获取及过期自动更新的实现方法
- 基于C++实现的哈夫曼编码解码操作示例