vue, el-input失去焦点提交数据，当切换浏览器的时候会提交俩次，就很有意思

200 阅读 0 评论 132 点赞

我是靠谱客的博主大力仙人掌，这篇文章主要介绍vue, el-input失去焦点提交数据，当切换浏览器的时候会提交俩次，就很有意思，现在分享给大家，希望可以做个参考。

今天遇见一个bug，当使用el-input失去焦点提交时，bug在聚焦清空下，切换浏览器会提交俩次数据

解决方法：在mounted中获取window失焦，聚焦，具体方式看同学需求是啥吧，我这里用的是状态值，跟计数来检测

 // 浏览器失焦处理添加步骤多条问题
window.onblur = () =>{
this.inputSubmit = false
this.inputCount = -1
}
// 浏览器聚焦处理添加步骤多条问题
window.onfocus = () =>{
this.inputSubmit = false
this.inputCount = -1
}
watch:{
// 添加步骤切换浏览器会添加多个，用户判断是否提交
inputCount:{
handler(val1, val2){
if(val1 || val2 ){
this.inputSubmit = true
}
}
}
},
最后是在这里提交数据，具体看自身情况
if(this.inputSubmit){
if (this.stepForm._id) {
this.edit()
} else {
this.time =
setTimeout(() => this.add(), 300)
}
}