原来真的有人,删掉手机里所有的娱乐软件,不管不顾任何东西,没日没夜的学习,就只是为了回到原来那个眼里有光被赋予希望的自己。 你要坚信每一个你想学习的念头,都是未来在向你求救!
懒惰是一个特别奇怪的东西, 它使你以为安逸是休息,是福气,它实际上给你带来了是无聊,是倦怠,是消沉,它剥夺你对前途的希望,隔断你和别人之间的友情,使你的心胸日益狭窄,对人生也越来越怀疑!
一、问题描述
在uniapp想要实现一个表单提交的功能,完成此功能后进行压力测试发现,当多次快速点击提交按钮,会将表单多次重复提交,这就导致后端后收到多条数据。所以,前端需要做一个按钮的重复点击处理。
二、解决方案
-
在根目录下新建common文件并创建common.js文件,输入下面的代码
// 防止处理多次点击 function noMultipleClicks(methods, info) { // methods是点击后需要执行的函数, info是函数需要传的参数 let that = this; if (that.noClick) { // 第一次点击 that.noClick= false; if((info && info !== '') || info == 0) { // info是执行函数需要传的参数 methods(info); } else { methods(); } setTimeout(()=> { that.noClick= true; }, 2000) } else { // 这里是重复点击的判断 } } //导出 export default { noMultipleClicks, // 禁止多次点击 }
-
main.js文件引入
// 配置公共方法 import common from '@/common/common.js' Vue.prototype.$noMultipleClicks = common.noMultipleClicks;
-
在实际页面中引用,不带参数,直接传入一个方法就行
// 记得在data中挂载 noClick:true data() { return { noClick: true, } }, <view class="bottom-btn-box"> <view class="submit-btn" @click="$noMultipleClicks(formSubmit)">提交</view> </view> methods:{ formSubmit(){ //表单内容 } }
-
在实际页面中引用,带参数,传一个方法和一个参数就行
// 记得在data中挂载 noClick:true data() { return { noClick:true, } }, <view class="bottom-btn-box"> <view class="formbtn" @click.stop="$noMultipleClicks(formSubmit, form)" >提交</view> </view> methods:{ formSubmit(form) { console.log(form) //表单内容 } }
三、常见问题
这种方法不仅仅可以用于uniapp中,也可以用于vue中实现防止多次点击表单提交。只需要简单的改一下标签即可。