快捷導(dǎo)航

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

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

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

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

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

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

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

該事件是一個(gè)異步函數(shù)，你需要在異步函數(shù)中返回對(duì)話框的關(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ǎn)擊確定的時(shí)候校驗(yàn)表單，如果校驗(yàn)不通過(guò)則調(diào)用封裝好的異步關(guān)閉函數(shù)，在promise中返回false阻止對(duì)話框關(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ǎn)擊確定，校驗(yàn)表單，校驗(yàn)不同過(guò)時(shí)調(diào)用dialogClost函數(shù)阻止對(duì)話框關(guān)閉

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

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

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

調(diào)用時(shí)：

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

到這里我們就實(shí)現(xiàn)了異步關(guān)閉van-dialog彈窗的功能。

到此這篇關(guān)于van-dialog彈窗異步關(guān)閉-校驗(yàn)表單的文章就介紹到這了,更多相關(guān)van-dialog彈窗異步關(guān)閉-校驗(yàn)表單內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: