vant-ui 구성 요소 호출 Dialog 창 비동기 닫 기 동작

필요 설명:
수요 설명:공식 문 서 는 구성 요소 호출 방식 이자 함수 호출 방식 입 니 다.
나 는 아주 간단 한 것 이 필요 하 다.작업 창 을 클릭 하여 표시 한 후에 나 는 폼 을 작성 하고 폼 검사 가 통과 한 후에 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>

관건 은 쇼 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)을 눌 러 서 팝 업 창 이 닫 히 는 것 을 막 았 다.
폼 검사 와 비동기 인터페이스 요청 이 성공 한 후 팝 업 창 을 닫 는 것 은 handle 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 팝 업 창 을 호출 하여 비동기 로 닫 는 작업 은 바로 작은 편집 이 여러분 에 게 공유 하 는 모든 내용 입 니 다.참고 하 시기 바 랍 니 다.여러분 들 도 저 희 를 많이 사랑 해 주 셨 으 면 좋 겠 습 니 다.