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>
重要なポイントは、show Dialog制御は、非表示を示しています。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)は、弾戸が閉まるのを阻止します。
フォームの検証と非同期インターフェースの要求が成功した後、パチンコを閉じるのは、ハンドルConfirm操作において、

  //       
  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の弾戸を呼び出して非同期的に操作します。つまり、小编は皆さんに提供した内容を全部共有します。