說明

成都一家集口碑和實(shí)力的網(wǎng)站建設(shè)服務(wù)商，擁有專業(yè)的企業(yè)建站團(tuán)隊(duì)和靠譜的建站技術(shù)，十多年企業(yè)及個人網(wǎng)站建設(shè)經(jīng)驗(yàn) ,為成都上1000家客戶提供網(wǎng)頁設(shè)計(jì)制作,網(wǎng)站開發(fā),企業(yè)網(wǎng)站制作建設(shè)等服務(wù),包括成都營銷型網(wǎng)站建設(shè)，成都品牌網(wǎng)站建設(shè)，同時也為不同行業(yè)的客戶提供做網(wǎng)站、成都網(wǎng)站設(shè)計(jì)的服務(wù),包括成都電商型網(wǎng)站制作建設(shè),裝修行業(yè)網(wǎng)站制作建設(shè)，傳統(tǒng)機(jī)械行業(yè)網(wǎng)站建設(shè),傳統(tǒng)農(nóng)業(yè)行業(yè)網(wǎng)站制作建設(shè)。在成都做網(wǎng)站,選網(wǎng)站制作建設(shè)服務(wù)商就選成都創(chuàng)新互聯(lián)。

UI組件是使用 Quasar Framework 。

最近做一個表單彈出框，表單保存提交，但是，產(chǎn)品提出，用戶不保存，而關(guān)閉彈出框時，要給出一個彈窗提示。這個功能，可以用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)一個確認(rèn)離開提示框，效果如下：

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

監(jiān)聽代碼

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

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

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

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

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

引入上面寫好的確認(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)閉時判斷的代碼邏輯：

注意，監(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 時，判斷條件是 !this.isEdit && this.count > 0 時彈出提示，否則不提示直接關(guān)閉表單彈出框。

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

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

2、編輯詳情的數(shù)據(jù)表單彈出框：

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

2）表單內(nèi)容沒有編輯任何值，直接點(diǎn)擊關(guān)閉，直接表單彈出框；

總結(jié)

到此這篇關(guān)于vue實(shí)現(xiàn)表單未編輯或未保存離開彈窗提示功能的文章就介紹到這了,更多相關(guān)vue表單離開彈窗提示內(nèi)容請搜索創(chuàng)新互聯(lián)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持創(chuàng)新互聯(lián)！