溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
在vant-ui組件中如何調用Dialog實現異步關閉彈窗？針對這個問題，這篇文章詳細介紹了相對應的分析和解答，希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。
需求描述：
需求描述：官方文檔又是組件調用方式，又是函數調用方式。
我就需要一個很簡單的：點擊操作彈窗顯示后，我填寫一個表單，表單校驗通過后，再調用API接口，返回成功后，關閉彈窗。
一個很簡單的東西，element-ui用的很方便，在這里就懵比了，剛開始做的，彈窗關閉了，才返回異步接口調用的結果。網速慢點，用起來真的很不好。
正確的解決方式一：
<van-dialog
v-model="showDialog"
title="提示"
show-cancel-button
:before-close="onBeforeClose"
@confirm="handleConfirm"
>
<van-form ref="myform">
<van-field
v-model="attendanceName"
name="name"
label="名稱"
placeholder="請輸入名稱"
:rules="[
{ required: true, message: '請填寫名稱' }
]"
/>
</van-form>
</van-dialog>關鍵點，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實現異步關閉彈窗問題的解答就分享到這里了，希望以上內容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關注億速云行業資訊頻道了解更多相關知識。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
