UI组件是使用 Quasar Framework 。
最近做一个表单弹出框，表单保存提交，但是，产品提出，用户不保存，而关闭弹出框时，要给出一个弹窗提示。这个功能，可以用watch监听表单数据。当数据表单发生变化，用户点击了关闭按钮，则根据监听结果来判断用户输入或编辑了数据，进而出现弹窗提示，让用户选择是否离开；当数据没发生变化，则不必提示。
确认离开提示框
实现效果
先实现一个确认离开提示框，效果如下：
实现代码：
<template> <div> <q-dialog :persistent="true" v-model="alert"> <q-card> <q-card-section> <q-btn icon="close" flat round dense v-close-popup /> </q-card-section> <q-card-section> 当前数据未保存，是否离开？ </q-card-section> <q-card-actions> <q-btn flat label="是" color="primary" v-close-popup @click="handleConfirm" /> <q-btn flat label="否" v-close-popup /> </q-card-actions> </q-card> </q-dialog> </div> </template> <script> export default { name: 'LeaveTipDialog', props: { }, data () { return { alert: false } }, methods: { init () { this.alert = true }, handleConfirm () { // 提交父组件的事件 this.$emit('handleConfirm') } } } </script> <style lang="stylus"> </style>
监听代码
监听代码如下：
watch: { datas: { handler (val) { if (val) { this.count++ } }, deep: true } },
判断数据变化的次数，因为刚加载数据未完全加载的时候，datas是空对象，待加载完之后，则出现一次数据变化， deep主要是深层次监听，因为数据是层层对象，比较复杂
创建/编辑 表单弹出框
代码，表单省略了，大致抽象为：
<template> <div> <q-dialog :persistent="true" v-model="visible"> <q-card> <q-card-section transition-hide="flip-up" > <div>{{ isEdit ? "编辑" : "创建" }}xxxx</div> <q-space /> <q-btn icon="close" flat round dense @click="close" /> </q-card-section> <q-card-section> <div></div> <q-form ref="form"> <!-- 省略了表单行 --> </q-form> </q-card-section> </q-card> </q-dialog> <!-- 弹窗 关闭 编辑/创建时 确认离开--> <LeaveTipDialog v-if="leave" ref="leave" @handleConfirm="handleLeave" ></LeaveTipDialog> </div> </template>
引入上面写好的确认离开提示框组件：
import LeaveTipDialog from 'components/LeaveTipDialog' props: { isEdit: { type: Boolean, required: true, default: false } }, components: { LeaveTipDialog }, data () { return { visible: false, form: { // .... 具体省略 }, count: 0, // form数据修改的数量 leave: false } }, watch: { form: { handler (val) { if (val) { this.count++ } }, deep: true } },
关闭时判断的代码逻辑：
注意，监听获取到的 count ，分为两种情况：
1、当打开的是新建数据的表单，那么一开始， form 的数据是空内容或者默认值，当用户输入了内容，点击关闭按钮，获取到的 this.count 是1或者更大的值。所以， isEdit 为 fasle 时，判断条件是 !this.isEdit && this.count > 0 时弹出提示，否则不提示直接关闭表单弹出框。
2、当打开的是编辑数据的表单，那么一开始， form 的数据是空内容或者默认值，当打开表单弹框时，先获取了数据详情内容并赋值费表单 form 数据，此时 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 = true this.$nextTick(() => { this.$refs.leave.init() }) } else if (!this.isEdit && this.count > 0) { // 新建 数据有修改弹出提示 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、编辑详情的数据表单弹出框：