Vant-uiコンポーネント呼び出しDialog弾窓非同期閉鎖

需要説明:
需要説明:公式ドキュメントはコンポーネント呼び出し方式であり、関数呼び出し方式でもあります.私は1つのとても簡単なことが必要です:クリックして弾窓の表示を操作した後に、私は1つのフォームに記入して、フォームの検査が通過した後に、更にAPIインタフェースを呼び出して、成功した後に帰って、弾窓を閉じます.
簡単なもので、element-uiは便利で、ここでは呆然としていて、最初に作ったばかりで、弾窓が閉まって、非同期インタフェース呼び出しの結果に戻りました.ネットのスピードが遅いので、本当によくありません.
正しい解決方法1:

    <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非同期リクエストが送信され、インタフェースが成功に戻った後、弾窓が閉じられます.