需求描述：

需求描述：官方文檔又是組件調(diào)用方式，又是函數(shù)調(diào)用方式。

我就需要一個很簡單的：點擊操作彈窗顯示后，我填寫一個表單，表單校驗通過后，再調(diào)用API接口，返回成功后，關(guān)閉彈窗。

一個很簡單的東西，element-ui用的很方便，在這里就懵比了，剛開始做的，彈窗關(guān)閉了，才返回異步接口調(diào)用的結(jié)果。網(wǎng)速慢點，用起來真的很不好。

正確的解決方式一：

v-model="showDialog"

title="提示"

show-cancel-button

:before-close="onBeforeClose"

@confirm="handleConfirm"

>

v-model="attendanceName"

name="name"

label="名稱"

placeholder="請輸入名稱"

:rules="[

{ required: true, message: '請?zhí)顚懨Q' }

]"

/>

關(guān)鍵點，showDialog控制顯示隱藏，before-close控制關(guān)閉前的回調(diào)，confirm 是彈窗點擊確認(rèn)按鈕觸發(fā)的事件，ref拿到form實例。

剛開始我把表單校驗放在before-close，實現(xiàn)的結(jié)果不對。

onBeforeClose(action, done) {

if (action === "confirm") {

return done(false);

} else {

// 重置表單校驗

this.$refs["myform"].resetValidation("name");

this.name= undefined;

return done();

}

},

我把onBeforeClose中的，點擊確認(rèn)confirm的操作，done(false)，阻止彈窗關(guān)閉

把表單校驗和異步接口請求成功后關(guān)閉彈窗的，都放到handleConfirm操作中，

// 實例彈窗確認(rèn)

handleConfirm() {

this.$refs["myform"]

.validate()

.then(() => {

let para = {

data: {

name: this.name,

},

};

ajaxAdd(para).then(() => {

this.showDialog = false; // 在這里手動的關(guān)閉彈窗

this.$toast.success("新增成功");

this.name= undefined;

this.onRefresh();

});

})

.catch(() => {});

},

這樣修改后，點擊取消，可以直接關(guān)閉。點擊確認(rèn)，需要先表單校驗，校驗成功后，才會去發(fā)送ajax異步請求，請求接口返回成功后，才會關(guān)閉彈窗。

補(bǔ)充知識：關(guān)于Vant dialog 異步彈出框使用記錄

這個是官方文檔，啥說明沒有就有個解釋

這是人干的的事嘛。。。

具體來說下怎么在vue中使用它

以上這篇vant-ui組件調(diào)用Dialog彈窗異步關(guān)閉操作就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持我們。

時間： 2020-11-02

總結(jié)

以上是生活随笔為你收集整理的loading怎么关闭 vant_vant-ui组件调用Dialog弹窗异步关闭操作的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。