vue實現表單未編輯或未保存離開彈窗提示

時間 2020-04-08

標籤 vue 實現表單未編輯保存離開提示欄目 HTML 简体版

原文原文鏈接

說明

UI組件是使用 Quasar Framework。vue

最近作一個表單彈出框，表單保存提交，可是，產品提出，用戶不保存，而關閉彈出框時，要給出一個彈窗提示。這個功能，能夠用watch監聽表單數據。當數據表單發生變化，用戶點擊了關閉按鈕，則根據監聽結果來判斷用戶輸入或編輯了數據，進而出現彈窗提示，讓用戶選擇是否離開；當數據沒發生變化，則沒必要提示。ide

確認離開提示框

實現效果

先實現一個確認離開提示框，效果以下：
post

實現代碼：

<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>

監聽代碼

監聽代碼以下：ui
watch: {
   datas: {
     handler (val) {
       if (val) {
         this.count++
       }
     },
     deep: true
   }
 },
複製代碼判斷數據變化的次數，由於剛加載數據未徹底加載的時候，datas是空對象，待加載完以後，則出現一次數據變化， deep主要是深層次監聽，由於數據是層層對象，比較複雜this

建立/編輯表單彈出框

代碼，表單省略了，大體抽象爲：spa

<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>

引入上面寫好的確認離開提示框組件：code

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，分爲兩種狀況：
一、當打開的是新建數據的表單，那麼一開始，form的數據是空內容或者默認值，當用戶輸入了內容，點擊關閉按鈕，獲取到的this.count是1或者更大的值。因此，isEdit爲fasle時，判斷條件是!this.isEdit && this.count > 0時彈出提示，不然不提示直接關閉表單彈出框。component

二、當打開的是編輯數據的表單，那麼一開始，form的數據是空內容或者默認值，當打開表單彈框時，先獲取了數據詳情內容並賦值費表單form數據，此時this.count的值已是1了。這時，當用戶編輯了表單內容，點擊關閉按鈕，獲取到的this.count是大於1的值。因此，isEdit 爲 true 時，判斷條件是 this.isEdit && this.count > 1 時彈出提示，不然不提示直接關閉表單彈出框。orm

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
    }
  }