// 新建 数据有修改弹出提示
this.leave = true
this.$nextTick(() => {
this.$refs.leave.init()
})
} else {
this.resetForm()
this.leave = false
this.visible = false
}
},
handleLeave () {
this.resetForm()
this.leave = false
this.visible = false
},
resetForm(){
// this.form.xxxx = '' // 表单数据清空
this.count = 0
}
}
实现效果
1、新建数据表单弹出框：
1）表单有输入，未保存点击关闭，给出一个弹窗提示“当前数据未保存，是否离开？”，选择是，关闭表单弹出框；选择否，表单弹出框不关闭；
2）表单没有输入任何值，直接点击关闭，直接表单弹出框；
2、编辑详情的数据表单弹出框：
1）表单内容有编辑情况，未保存点击关闭，给出一个弹窗提示“当前数据未保存，是否离开？”，选择是，关闭表单弹出框；选择否，表单弹出框不关闭；
2）表单内容没有编辑任何值，直接点击关闭，直接表单弹出框；
总结
到此这篇关于vue实现表单未编辑或未保存离开弹窗提示功能的文章就介绍到这了,更多相关vue表单离开弹窗提示内容请搜索软件开发网以前的文章或继续浏览下面的相关文章希望大家以后多多支持软件开发网！
