van-dialog彈窗異步關閉

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

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

在vant的官網提供了一個異步關閉對話框的事件：before-close

該事件是一個異步函數，你需要在異步函數中返回對話框的關閉狀態。

使用方法如下：

  <van-dialog before-close="{{beforeClose}}" use-slot title="編輯指標" 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函數

  data: {
    beforeClose: null, // 綁定異步關閉函數
  },

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

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

用戶點擊確定，校驗表單，校驗不同過時調用dialogClost函數阻止對話框關閉

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

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

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

調用時：

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

到這里我們就實現了異步關閉van-dialog彈窗的功能。

---

如果覺得這篇文章對你有幫助，歡迎點贊??、收藏??、轉發?哦~

總結

以上是生活随笔為你收集整理的van-dialog弹窗异步关闭-校验表单的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。