vant weapp Dialog 在组件中调用beforeClose

最新推荐文章于 2024-06-18 18:15:32 发布

原创最新推荐文章于 2024-06-18 18:15:32 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#小程序 #前端 #javascript

小程序专栏收录该内容

8 篇文章

订阅专栏

该博客展示了如何在微信小程序中利用Promise处理van-dialog组件的关闭事件。在用户点击确认按钮前，检查是否输入了原因，未输入则提示用户，输入后调用接口。如果接口返回成功，则关闭弹出框；否则保持弹出框打开。

需求：在点击按钮的时候，显示弹出框，点击弹出框确定按钮，判断有没有填写原因，如果没有填写就弹出提示(不关闭弹出框)，如果填写了就调接口返回成功后关闭弹出框

我太懒了直接扔代码吧哈哈哈

wxml: 在组件上增加代码 before-close="{{ beforeClose }}"

<van-dialog use-slot title="请输入原因" show="{{ inputReasion }}" show-cancel-button bind:close="onClose" bind:confirm="confirmClick" before-close="{{ beforeClose }}">
  <view>
    <textarea maxlength='-1' auto-focus bindinput="inputReasionFun"></textarea>
  </view>
</van-dialog>

js:

onLoad: function (options) {
    this.setData({
      beforeClose:(action)=>{
        return new Promise((resolve) => {
          if (action === 'confirm'){
            //如果没有填写原因
            if(!this.data.reasion){
              //保留弹框并提示
              resolve(false);
              app.tishi('请输入原因')
            }else{
              //调用接口
              api.reviewRecords({
                content:this.data.reasion,
              }).then(res=>{
                if(res.statusCode == 200){
                  resolve(true);//关闭弹框
                }else{
                  resolve(false);//不关闭
                }
              })
            }
          }else{
            //点击取消按钮关闭弹框
            console.log('cancel')
            resolve(true);
          }
         });
       },
    })
  },