vue实现表单未编辑或未保存离开弹窗提示功能实现表单未编辑或未保存离开弹窗提示功能
说明说明
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 () {
// 提交父组件的事件
评论10