需求描述：

需求描述：官方文檔又是組件調用方式，又是函數調用方式。

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

一個很簡單的東西，element-ui用的很方便，在這里就懵比了，剛開始做的，彈窗關閉了，才返回異步接口調用的結果。網速慢點，用起來真的很不好。

正確的解決方式一：

v-model="showDialog"

title="提示"

show-cancel-button

:before-close="onBeforeClose"

@confirm="handleConfirm"

>

v-model="attendanceName"

name="name"

label="名稱"

placeholder="請輸入名稱"

:rules="[

{ required: true, message: '請填寫名稱' }

]"

/>

關鍵點，showDialog控制顯示隱藏，before-close控制關閉前的回調，confirm 是彈窗點擊確認按鈕觸發的事件，ref拿到form實例。

剛開始我把表單校驗放在before-close，實現的結果不對。

onBeforeClose(action, done) {

if (action === "confirm") {

return done(false);

} else {

// 重置表單校驗

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

this.name= undefined;

return done();

}

},

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

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

// 實例彈窗確認

handleConfirm() {

this.$refs["myform"]

.validate()

.then(() => {

let para = {

data: {

name: this.name,

},

};

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

this.showDialog = false; // 在這里手動的關閉彈窗

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

this.name= undefined;

this.onRefresh();

});

})

.catch(() => {});

},

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

補充知識：關于Vant dialog 異步彈出框使用記錄

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

這是人干的的事嘛。。。

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

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

時間： 2020-11-02

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。