<强>说明
UI组件是使用类星体框架。
最近做一个表单弹出框,表单保存提交,但是,产品提出,用户不保存,而关闭弹出框时,要给出一个弹窗提示。这个功能,可以用看监听表单数据。当数据表单发生变化,用户点击了关闭按钮,则根据监听结果来判断用户输入或编辑了数据,进而出现弹窗提示,让用户选择是否离开;当数据没发生变化,则不必提示。
<强>确认离开提示框
实现效果
先实现一个确认离开提示框,效果如下:
& lt; template>
& lt; div>
& lt; q-dialog:持久=" true " v模型=熬ā北?
& lt; q-card比;
& lt; q-card-section>
& lt; q-btn图标=肮乇铡逼皆裁芗痸-close-popup类=" float-right "/比;
& lt;/q-card-section>
& lt; q-card-section class=" q-pt-none text-center”比;
当前数据未保存,是否离开吗?
& lt;/q-card-section>
& lt; q-card-actions对齐=罢贰钡淖４?
& lt; q-btn
平
label="是"
颜色="主"
v-close-popup
@click=" handleConfirm "/比;
& lt; q-btn平标签="否" v-close-popup/比;
& lt;/q-card-actions>
& lt;/q-card>
& lt;/q-dialog>
& lt;/div>
& lt;/template>
& lt; script>
出口默认{
名称:“LeaveTipDialog”,
道具:{
}，
数据(){
返回{
警告:假
}
}，
方法:{
init () {
这一点。警报=true
}，
handleConfirm () {//提交父组件的事件
美元。发出(“handleConfirm”)
}
}
}
& lt;/script>
& lt;风格lang=氨省北?
& lt;/style>
<>强监听代码
监听代码如下:
判断数据变化的次数,因为刚加载数据未完全加载的时候,<代码>数据> 主深要是深层次监听,因为数据是层层对象,比较复杂
<>强创建/编辑表单弹出框
代码,表单省略了,大致抽象为:
引入上面写好的确认离开提示框组件:
关闭时判断的代码逻辑:
注意,监听获取到的统计,分为两种情况:
1,当打开的是新建数据的表单,那么一开始,形式的数据是空内容或者默认值,当用户输入了内容,点击关闭按钮,获取到的。数是1或者更大的值,所以,isEdit为意见时,判断条件是<代码> !。isEdit,,这一点。数比;0> vue实现表单未编辑或未保存离开弹窗提示功能
