一、问题导入
当我们在页面进行点点点的操作时,很可能遇到点击两次的行为,这时候提交或保存按钮也没有进行校验,很可能保存两份数据,因此,作为开发人员,对需要保存类似的按钮进行校验很有必要。
二、问题分析
我们通过控制isDisable 来设置 disabled来控制按钮的点击和不可点击。 默认isDisable:的值为 false,按钮可以点击。 当我们点击这个按钮的时候,首先将按钮的绑定isDisable设置为true,1秒后立马将其置为false。此时,用户就不能多点了, 过了一秒的时间后才能去操作这个按钮。
sendComment () {
this.disabled = true
if (this.text == ''){
this.$message({
type:'error',
message:'输入内容不能为空',
})
this.disabled = false
}else{
this.$post('/xx/xx/IdleGoodsComment',{
goods_id:this.$route.params.id,
content:this.text,
user_id:window.uId,
type:1
}).then((res) => {
if(res){
this.getDetail()
setTimeout(()=>{
this.disabled=false
this.getCommentList()
this.text = ''}
,1000)
}
})
}
}
复制代码
以上代码是通过计时器将button属性更改,点击完之后讲button属性设置为disable
vue绑定button的disable属性为:disabled:‘变量名’。
三、总结
页面按钮要注意多次点击重复提交数据
这里用的vue案例介绍,如果是使用别的前端框架,其思想大同小异
如果你觉得此文对你有一丁点帮助,点个赞。或者可以加入我的开发交流群:1025263163相互学习,我们会有专业的技术答疑解惑
如果你觉得这篇文章对你有点用的话,麻烦请给我们的开源项目点点star: http://github.crmeb.net/u/defu 不胜感激 !