Vant Weapp Dialog 弹出框的before-close用法

小涛Dirge

已于 2022-02-09 14:48:05 修改

阅读量2.2k

点赞数 2

文章标签： javascript 前端小程序

于 2022-02-08 10:42:53 首次发布

本文链接：https://blog.csdn.net/tyt_XiaoTao/article/details/122819512

版权

简单的弹出对话框实现案例参考Vant Weapp 官网

本示例是对话框中插入输入框（例如审核操作），示例如下

在这里插入图片描述

引入

在app.json或index.json中引入组件

"usingComponents": {
  "van-dialog": "@vant/weapp/dialog/index"
}

index.wxml

<van-dialog use-slot title="审核操作" show="{{ show }}" show-cancel-button bind:close="onClose" bind:confirm="saveLogistics" before-close="{{ beforeClose }}">
    <van-field model:value="{{ remark }}" label="审核描述" type="textarea" placeholder="请输入审核描述" required clearable autosize="{{ autosize }}" />
</van-dialog>

index.js

Page({
  data: {
  	// 设置textarea的内容高度
    autosize: {
      maxHeight: 200,
      minHeight: 100
    },
    show: false,
    onSubmitFlag: '',
    remark: '',
    beforeClose(action) {
      return new Promise((resolve) => {
        setTimeout(() => {
          if (action === 'confirm') {
            // 拦截确认操作
             resolve(false);
          } else {
            resolve(true);
          }
        }, 0);
      });
    }
  },
  // 关闭弹框
  closeDialog() {
    this.setData({
      show: false,
      remark: ''
    });
  },
  // 对话框确认提交审核
  saveLogistics(){
    let that = this;
    const { onSubmitFlag, remark } = that.data;
    if (remark === null || remark === undefined || remark.trim() === '') {
      SHOWTIPS('请输入审核描述', 'none');
      return;
    }
   // 调用后端接口进行审核操作处理
   // 获取token
   let token = wx.getStorageSync('token') ? wx.getStorageSync('token') : '';
   // 可以把wx.request请求自行封装
   wx.request({
        url: "http://localhost:8080/submitTask", // 请求地址
        method: 'POST',  // POST请求
        data: {
            params: remark  //参数
        },
        header: {
          'content-type': 'application/json', // 请求方式
          'Authorization': token
        },
        success(res) {
          // 关闭弹框
          this.closeDialog();
          if (res.statusCode === 200 && res.data.code === 200) {
            // 业务的其他处理(例如跳转到其他页面)
            // ...
          } else {
            wx.showToast({
              title: res.data.message,
              icon: 'error'
            })
          }
        },
        fail(error) {
          wx.showToast({
            title: '数据接口有问题',
            icon: 'error'
          })
        }
      })
    });
  },
  onClose() {
    this.setData({ 
      show: false,
      remark: ''
     });
  },
})