我正在开发一个通用应用程序，让用户输入公式并保存，yadda yadda。我想确保在未保存更改时警告用户，通过应用内路由和 beforeunload 事件触发的提示。两者都应该在发生更改时处于活动状态，但如果没有任何更改/表单为空，则恢复为非活动状态。第一个完美无缺。第二个，“beforeunload”事件也被读取和删除，但前提是触发更改为“isEmpty / isDifferent”状态的输入元素首先未获得焦点。这很烦人，因为当用户开始输入时它不会提供即时反馈，因为即使该字段不为空，用户也可以通过刷新使页面不被警告，因为他没有使输入失去焦点。
以下是相关代码：
handleBeforeUnload (e) {
console.log('leaving')
e.preventDefault()
},
leaving (preventDefault) {
if (preventDefault) {
window.addEventListener('beforeunload', this.handleBeforeUnload)
console.log('should be added')
} else {
window.removeEventListener('beforeunload', this.handleBeforeUnload)
console.log('should be removed')
}
}
},
components: {
'form-input': Input,
modal: Modal
},
watch: {
isEmpty () {
this.leaving(!this.isEmpty)
}
},
现在我只配置了组件来处理新文档，这就是为什么我现在只使用“isEmpty”作为状态。在“handleBeforeUnload”方法之前，该链按预期工作，该方法只能在用户在输入未聚焦后刷新或类似情况下触发。我推测这种行为可能是 Vue 的生命周期钩子的结果，特别是“beforeDestroy”，但我不确定。是什么导致了这种行为？提前致谢。
慕妹3242003
相关分类