Vue意识到表单没有被编辑或保存，并留下弹窗提示

，说明UI组件使用了QuasarFramework。最近做了一个表单弹出框，表单保存提交。但是，当提出产品，用户没有保存，关闭弹框时，应该给出弹窗提示。有了这个功能，watch就可以用来监控表单数据了。当数据表单发生变化，用户点击关闭按钮时，会根据监控结果判断用户是否输入或编辑了数据，然后弹出提示，让用户选择是否离开;当数据没有变化时，不需要提示。确认离开提示框实现效果先实现一个确认离开提示框，效果如下：实现代码：监听代码监听代码如下：watch:{datas:{handler(val){if(val){this.count++}},deep:true}}，复制代码判断数据变化的个数，因为刚加载数据的时候没有完全加载，datas是Empty对象，加载后会有数据变化，deep主要是做深度监控，因为数据是逐层对象，创建/编辑表单比较复杂弹框代码，形式省略，大致抽象为：导入上面的书面确认离开提示框组件：importLeaveTipDialogfrom'components/LeaveTipDialog'props:{isEdit:{type:Boolean,required:true,default:false}},components:{LeaveTipDialog},data(){return{visible:false,form:{//....具体省略},count:0,//表单数据修改次数leave:false}},watch:{form:{handler(val){if(val){this.count++}},deep:true}},关闭时判断的代码逻辑：注意监听得到的count分为两种情况：1.打开新的数据表单时，那么一开始，表单data为空内容或默认值。当用户输入内容点击关闭按钮时，得到的this.count为1或更大所以当isEdit为fasle时，判断条件为当!this.isEdit&&this.count>0时，弹出提示，否则不提示直接关闭窗体弹框。2、当打开编辑数据的表单时，一开始表单的数据为空或默认值。打开表单弹框时，首先获取数据明细，赋值表单数据。这个时候this.count的值已经是1了，这时候当用户编辑表单内容，点击关闭按钮的时候，得到的this.count是一个大于1的值，所以当isEdit为true时，判断条件是当this.isEdit&&this.count>1时弹出提示，否则不提示则关闭窗体弹框。methods:{close(){//console.log(`isEdit:${this.isEdit}:${this.count}`)if(this.isEdit&&this.count>1){//已编辑的数据修改弹窗提示this.leave=truethis.$nextTick(()=>{this.$refs.leave.init()})}elseif(!this.isEdit&&this.count>0){//新数据有修改弹窗提示this.leave=truethis.$nextTick(()=>{this.$refs.leave.init()})}else{this.resetForm()this.leave=falsethis.visible=false}},handleLeave(){this.resetForm()this.leave=falsethis.visible=false},resetForm(){//this.form.xxxx=''//清除表单数据this.count=0}}实现效果1.新建一个数据表单弹出框：1）表单有输入，但是还没有保存。点击关闭，弹出窗口提示“当前数据未保存，是否退出？”，选择是，关闭表单弹框；选择否，窗体弹出框不关闭；2）如果表单没有输入值，直接点击关闭，直接弹出表单；2、编辑详情的数据表单弹出框：1）表单内容已编辑，点击关闭不保存，弹出提示“当前数据未保存，是否退出？”，选择是，关闭窗体的弹出框；选择否，则不会关闭窗体的弹出框；2）如果表单内容没有编辑值，直接点击关闭，会直接打开表单的弹出框；参考Materialvue实现页面是否编辑和编辑页面不保存留下弹窗提示