說明

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"
     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++
    }
   },

關閉時判斷的程式碼邏輯：

注意，監聽獲取到的 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實現表單未編輯或未儲存離開彈窗提示功能的文章就介紹到這了,更多相關vue表單離開彈窗提示內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！