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異步請求，請求接口返回成功後，纔會關閉彈窗。