van-dialog彈窗非同步關閉-校驗表單

DCodes發表於2023-11-15
非同步

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彈窗的功能。

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

相關文章