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 () {
      // 提交父组件的事件
      this.$emit('handleConfirm')
    }
  }
}
</script>

<style lang="stylus">

</style>

监听代码

创建/编辑 表单弹出框

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

<template>
  <div>
    <q-dialog :persistent="true" v-model="visible">
      <q-card class="card">
        <q-card-section
          transition-hide="flip-up"
          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) {
        // 新建 数据有修改弹出提示
        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、编辑详情的数据表单弹出框：
1）表单内容有编辑情况，未保存点击关闭，给出一个弹窗提示“当前数据未保存，是否离开？”，选择是，关闭表单弹出框；选择否，表单弹出框不关闭；
2）表单内容没有编辑任何值，直接点击关闭，直接表单弹出框；

参考资料

vue实现判断页面是否编辑及编辑页面未保存离开弹窗提示