class="row items-center q-pb-none"
style="padding-top: 10px;"
>
<div class="text-h6">{{ isEdit ? "编辑" : "创建" }}xxxx</div>
<q-space />
<q-btn icon="close" flat round dense @click="close" />
</q-card-section>
<q-card-section class="form">
<div class="line"></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) {
