vant-ui組件調(diào)用Dialog彈窗異步關(guān)閉操作

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

這篇文章主要介紹了vant-ui組件調(diào)用Dialog彈窗異步關(guān)閉操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧

需求描述：

需求描述：官方文檔又是組件調(diào)用方式，又是函數(shù)調(diào)用方式。

我就需要一個(gè)很簡單的：點(diǎn)擊操作彈窗顯示后，我填寫一個(gè)表單，表單校驗(yàn)通過后，再調(diào)用API接口，返回成功后，關(guān)閉彈窗。

一個(gè)很簡單的東西，element-ui用的很方便，在這里就懵比了，剛開始做的，彈窗關(guān)閉了，才返回異步接口調(diào)用的結(jié)果。網(wǎng)速慢點(diǎn)，用起來真的很不好。

正確的解決方式一：

  <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="請(qǐng)輸入名稱"
     :rules="[
      { required: true, message: '請(qǐng)?zhí)顚懨Q' }
     ]"
    />
   </van-form>
  </van-dialog>

關(guān)鍵點(diǎn)，showDialog控制顯示隱藏，before-close控制關(guān)閉前的回調(diào)，confirm 是彈窗點(diǎn)擊確認(rèn)按鈕觸發(fā)的事件，ref拿到form實(shí)例。

剛開始我把表單校驗(yàn)放在before-close，實(shí)現(xiàn)的結(jié)果不對(duì)。

  onBeforeClose(action, done) {
   if (action === "confirm") {
    return done(false);
   } else {
    // 重置表單校驗(yàn)
    this.$refs["myform"].resetValidation("name");
    this.name= undefined;
    return done();
   }
  },

我把onBeforeClose中的，點(diǎn)擊確認(rèn)confirm的操作，done(false)，阻止彈窗關(guān)閉

把表單校驗(yàn)和異步接口請(qǐng)求成功后關(guān)閉彈窗的，都放到handleConfirm操作中，

  // 實(shí)例彈窗確認(rèn)
  handleConfirm() {
   this.$refs["myform"]
    .validate()
    .then(() => {
     let para = {
      data: {
       name: this.name,
      },
     };
     ajaxAdd(para).then(() => {
      this.showDialog = false; // 在這里手動(dòng)的關(guān)閉彈窗
      this.$toast.success("新增成功");
      this.name= undefined;
      this.onRefresh();
     });
    })
    .catch(() => {});
  },

這樣修改后，點(diǎn)擊取消，可以直接關(guān)閉。點(diǎn)擊確認(rèn)，需要先表單校驗(yàn)，校驗(yàn)成功后，才會(huì)去發(fā)送ajax異步請(qǐng)求，請(qǐng)求接口返回成功后，才會(huì)關(guān)閉彈窗。

補(bǔ)充知識(shí)：關(guān)于Vant dialog 異步彈出框使用記錄