uniapp+vue 前端防多次点击表单,防误触多次请求方法。
最近项目需求写了个uniapp+vue前端H5,有个页面提交表单的时候发现会有用户乱点导致数据库多条重复脏数据。故需要优化,多次点击表单只请求一次。
思路:
直接调用uni.showToast,点完按钮跳一个提交成功的提示。然后把防触摸穿透mask
设置成true
就行,最后windows.location.reload()
刷新一下表单。
核心代码
写在提交按钮绑定的方法里
uni.showToast({
title: '提交成功',
duration: 1000,
mask:true//true显示透明蒙层,防止触摸穿透
});
windows.location.reload()
js完整代码
methods: {
submit() {
this.$refs.form.validate().then(res =>{
console.log('校验成功')
uni.request({
url:('http://xxx.xxx.xxx.xx'),
method:'POST',
data:this.user,
success(res) {
console.log(res)
uni.showToast({
title: '提交成功',
duration: 1000,
mask:true//true显示透明蒙层,防止触摸穿透
});
window.location.reload()
}
})
}
)
}
}