vant-ui組件調用Dialog彈窗異步關閉操作

更新時間：2020年11月04日 15:28:59 作者：一鍵寫代碼

這篇文章主要介紹了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: '請?zhí)顚懨Q' }
     ]"
    />
   </van-form>
  </van-dialog>

關鍵點，showDialog控制顯示隱藏，before-close控制關閉前的回調，confirm 是彈窗點擊確認按鈕觸發(fā)的事件，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(() => {});
  },

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

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