vue實(shí)現(xiàn)表單未編輯或未保存離開彈窗提示功能

更新時(shí)間：2020年04月08日 08:35:11 作者：北堂棣

這篇文章主要介紹了vue實(shí)現(xiàn)表單未編輯或未保存離開彈窗提示功能，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

說明

UI組件是使用 Quasar Framework 。

最近做一個(gè)表單彈出框，表單保存提交，但是，產(chǎn)品提出，用戶不保存，而關(guān)閉彈出框時(shí)，要給出一個(gè)彈窗提示。這個(gè)功能，可以用watch監(jiān)聽表單數(shù)據(jù)。當(dāng)數(shù)據(jù)表單發(fā)生變化，用戶點(diǎn)擊了關(guān)閉按鈕，則根據(jù)監(jiān)聽結(jié)果來判斷用戶輸入或編輯了數(shù)據(jù)，進(jìn)而出現(xiàn)彈窗提示，讓用戶選擇是否離開；當(dāng)數(shù)據(jù)沒發(fā)生變化，則不必提示。

確認(rèn)離開提示框

實(shí)現(xiàn)效果

先實(shí)現(xiàn)一個(gè)確認(rèn)離開提示框，效果如下：

實(shí)現(xiàn)代碼：

<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;">
     當(dāng)前數(shù)據(jù)未保存，是否離開？
    </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>

監(jiān)聽代碼

監(jiān)聽代碼如下：

watch: {
  datas: {
   handler (val) {
    if (val) {
     this.count++
    }
   },
   deep: true
  }
 },

判斷數(shù)據(jù)變化的次數(shù)，因?yàn)閯偧虞d數(shù)據(jù)未完全加載的時(shí)候，datas是空對(duì)象，待加載完之后，則出現(xiàn)一次數(shù)據(jù)變化， deep主要是深層次監(jiān)聽，因?yàn)閿?shù)據(jù)是層層對(duì)象，比較復(fù)雜

創(chuàng)建/編輯表單彈出框

代碼，表單省略了，大致抽象為：

<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 ? "編輯" : "創(chuàng)建" }}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>
  
    <!-- 彈窗 關(guān)閉 編輯/創(chuàng)建時(shí) 確認(rèn)離開-->
  <LeaveTipDialog
   v-if="leave"
   ref="leave"
   @handleConfirm="handleLeave"
  ></LeaveTipDialog>
 </div>
</template>

引入上面寫好的確認(rèn)離開提示框組件：

import LeaveTipDialog from 'components/LeaveTipDialog'
props: {
  isEdit: {
   type: Boolean,
   required: true,
   default: false
  }
 },
 components: {
  LeaveTipDialog
 },
 data () {
  return {
   visible: false,
   form: {
   // .... 具體省略
   },
   count: 0, // form數(shù)據(jù)修改的數(shù)量
   leave: false
  }
 },
 watch: {
  form: {
   handler (val) {
    if (val) {
     this.count++
    }
   },
   deep: true
  }
 },

關(guān)閉時(shí)判斷的代碼邏輯：

注意，監(jiān)聽獲取到的 count ，分為兩種情況：

1、當(dāng)打開的是新建數(shù)據(jù)的表單，那么一開始， form 的數(shù)據(jù)是空內(nèi)容或者默認(rèn)值，當(dāng)用戶輸入了內(nèi)容，點(diǎn)擊關(guān)閉按鈕，獲取到的 this.count 是1或者更大的值。所以， isEdit 為 fasle 時(shí)，判斷條件是 !this.isEdit && this.count > 0 時(shí)彈出提示，否則不提示直接關(guān)閉表單彈出框。

2、當(dāng)打開的是編輯數(shù)據(jù)的表單，那么一開始， form 的數(shù)據(jù)是空內(nèi)容或者默認(rèn)值，當(dāng)打開表單彈框時(shí)，先獲取了數(shù)據(jù)詳情內(nèi)容并賦值費(fèi)表單 form 數(shù)據(jù)，此時(shí) this.count 的值已經(jīng)是1了。這時(shí)，當(dāng)用戶編輯了表單內(nèi)容，點(diǎn)擊關(guān)閉按鈕，獲取到的 this.count 是大于1的值。所以， isEdit 為 true 時(shí)，判斷條件是 this.isEdit && this.count > 1 時(shí)彈出提示，否則不提示直接關(guān)閉表單彈出框。

methods: {
  close () {
   // console.log(`isEdit:${this.isEdit}:${this.count}`)
   if (this.isEdit && this.count > 1) {
    // 編輯 數(shù)據(jù)有修改彈出提示
    this.leave = true
    this.$nextTick(() => {
     this.$refs.leave.init()
    })
   } else if (!this.isEdit && this.count > 0) {
    // 新建 數(shù)據(jù)有修改彈出提示
    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 = '' // 表單數(shù)據(jù)清空
    this.count = 0
  }
 }

實(shí)現(xiàn)效果

1、新建數(shù)據(jù)表單彈出框：

1）表單有輸入，未保存點(diǎn)擊關(guān)閉，給出一個(gè)彈窗提示“當(dāng)前數(shù)據(jù)未保存，是否離開？”，選擇是，關(guān)閉表單彈出框；選擇否，表單彈出框不關(guān)閉；

2）表單沒有輸入任何值，直接點(diǎn)擊關(guān)閉，直接表單彈出框；