快捷導(dǎo)航

van-dialog彈窗異步關(guān)閉功能-校驗表單實現(xiàn)

更新時間：2023年11月16日 08:55:21 作者：DCodes

有時候我們需要通過彈窗去處理表單數(shù)據(jù)，在原生微信小程序配合vant組件中有多種方式實現(xiàn)，其中UI美觀度最高的就是通過van-dialog嵌套表單實現(xiàn)，這篇文章主要介紹了van-dialog彈窗異步關(guān)閉-校驗表單,需要的朋友可以參考下

van-dialog彈窗異步關(guān)閉

有時候我們需要通過彈窗去處理表單數(shù)據(jù)，在原生微信小程序配合vant組件中有多種方式實現(xiàn)，其中UI美觀度最高的就是通過van-dialog嵌套表單實現(xiàn)。

通常表單涉及到是否必填，在van-dialog的確認(rèn)事件中直接return是無法阻止對話框關(guān)閉的，你需要通過異步關(guān)閉對話框的方式實現(xiàn)表單校驗后的對話框關(guān)閉。只有當(dāng)表單中的必填項全部校驗通過才允許確認(rèn)關(guān)閉對話框，否則阻止關(guān)閉并給予提醒。

在vant的官網(wǎng)提供了一個異步關(guān)閉對話框的事件：before-close

該事件是一個異步函數(shù)，你需要在異步函數(shù)中返回對話框的關(guān)閉狀態(tài)。

使用方法如下：

 <van-dialog before-close="{{beforeClose}}" use-slot title="編輯指標(biāo)" show="{{ editShow }}" show-cancel-button bind:close="onClose" bind:confirm="sureDialog" confirm-button-color="#3d7fff">
    <view class="edit_chunk">
           <!-- 這里寫自定義的表單...... -->
    </view>
  </van-dialog>

這里用到了before-close="{{beforeClose}}"方法，它指向的是data中的beforeClose函數(shù)

  data: {
    beforeClose: null, // 綁定異步關(guān)閉函數(shù)
  },

你可以在用戶點擊確定的時候校驗表單，如果校驗不通過則調(diào)用封裝好的異步關(guān)閉函數(shù)，在promise中返回false阻止對話框關(guān)閉。

// 封裝異步關(guān)閉函數(shù)
dialogClost() {
     this.setData({
        beforeClose: (action) =>
          new Promise((resolve) => {
            if (action === 'confirm') {
              // 確定按鈕
              resolve(false)
            } else if (action === 'cancel') {
              // 取消按鈕
              resolve(true)
            }
          }),
      })
  },

用戶點擊確定，校驗表單，校驗不同過時調(diào)用dialogClost函數(shù)阻止對話框關(guān)閉

// 確定
  sureDialog() {
    let { dataForm } = this.data;
    if (!dataForm.lineType) {
      wx.showToast({
        title: '請選擇曲線類型',
        icon: 'none'
      })
      return this.dialogClost();
    }
  },

這里需要注意：如果使用異步關(guān)閉對話框，它會默認(rèn)替換用戶的對話框關(guān)閉事件，所以我們需要區(qū)分兩種場景：
1、校驗不通過
2、校驗通過
點擊取消時，無論校驗是否通過都應(yīng)該關(guān)閉彈窗。
點擊確定需要校驗表單是否通過。
所以你可以通過當(dāng)前的狀態(tài)來決定是否關(guān)閉彈窗

  dialogClost(type) {
      this.setData({
        beforeClose: (action) =>
          new Promise((resolve) => {
            if (action === 'confirm') {
              // 點擊確定，根據(jù)傳入的狀態(tài)判斷是否取消
              resolve(type)
            } else if (action === 'cancel') {
              // 取消則直接關(guān)閉
              resolve(true)
            }
          }),
      })
  },

調(diào)用時：

// 確定
  sureDialog() {
    let { dataForm } = this.data;
    if (!dataForm.lineType) {
      wx.showToast({
        title: '請選擇曲線類型',
        icon: 'none'
      })
      return this.dialogClost(false); // 表單校驗不通過
    }
    this.dialogClost(true); // 表單校驗通過
  },