oracle vue 退出,vue实现表单未编辑或未保存离开弹窗提示功能

最新推荐文章于 2023-09-28 11:45:29 发布

杨利堃

最新推荐文章于 2023-09-28 11:45:29 发布

阅读量393

点赞数

文章标签： oracle vue 退出

本文介绍了如何在Vue应用中实现表单弹窗提示功能，当用户未保存表单修改就尝试关闭时，会显示一个确认离开的提示框。通过watch监听表单数据变化，结合关闭操作的逻辑判断，确保在数据有变动时提醒用户。该功能适用于新建和编辑两种场景，确保用户体验和数据完整性。

摘要由CSDN通过智能技术生成

说明

最近做一个表单弹出框，表单保存提交，但是，产品提出，用户不保存，而关闭弹出框时，要给出一个弹窗提示。这个功能，可以用watch监听表单数据。当数据表单发生变化，用户点击了关闭按钮，则根据监听结果来判断用户输入或编辑了数据，进而出现弹窗提示，让用户选择是否离开；当数据没发生变化，则不必提示。

确认离开提示框

实现效果

先实现一个确认离开提示框，效果如下：

实现代码：

当前数据未保存，是否离开？

flat

label="是"

color="primary"

v-close-popup

@click="handleConfirm"

export default {

name: 'LeaveTipDialog',

props: {

data () {

return {

alert: false

}

methods: {

init () {

this.alert = true

handleConfirm () {

// 提交父组件的事件

this.$emit('handleConfirm')

}

监听代码

监听代码如下：

watch: {

datas: {

handler (val) {

if (val) {

this.count++

}

deep: true

}

判断数据变化的次数，因为刚加载数据未完全加载的时候，datas是空对象，待加载完之后，则出现一次数据变化， deep主要是深层次监听，因为数据是层层对象，比较复杂

创建/编辑表单弹出框

代码，表单省略了，大致抽象为：

transition-hide="flip-up"

class="row items-center q-pb-none"

style="padding-top: 10px;"

{{ isEdit ? "编辑" : "创建" }}xxxx

v-if="leave"

ref="leave"

@handleConfirm="handleLeave"

引入上面写好的确认离开提示框组件：

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