說明

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)代碼：

<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 /> </q-card-section> <q-card-section 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ù)，因為剛加載數(shù)據(jù)未完全加載的時候，datas是空對象，待加載完之后，則出現(xiàn)一次數(shù)據(jù)變化， deep主要是深層次監(jiān)聽，因為數(shù)據(jù)是層層對象，比較復(fù)雜

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

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

<template> <div> <q-dialog :persistent='true' v-model='visible'> <q-card class='card'> <q-card-section transition-hide='flip-up'> <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)建時 確認(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)閉時判斷的代碼邏輯：

注意，監(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)容請搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！