说明
UI组件是使用 Quasar Framework 。
最近做一个表单弹出框，表单保存提交，但是，产品提出，用户不保存，而关闭弹出框时，要给出一个弹窗提示。这个功能，可以用watch监听表单数据。当数据表单发生变化，用户点击了关闭按钮，则根据监听结果来判断用户输入或编辑了数据，进而出现弹窗提示，让用户选择是否离开；当数据没发生变化，则不必提示。
确认离开提示框
实现效果
先实现一个确认离开提示框，效果如下：
实现代码：
<template>
<div>
<q-dialog :persistent="true" v-model="alert">
<q-card style="width:340px;">
<q-card-section>
<q-btn icon="close" flat round dense v-close-popup class="float-right" />
</q-card-section> <q-card-section class="q-pt-none text-center" style="margin-top: 10px;">
当前数据未保存，是否离开？
</q-card-section>
<q-card-actions align="right">
<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 class="card">
<q-card-section
transition-hide="flip-up"
