preface

Recently, a function to modify logistics was made in the project applet, and van-dialog was used to realize the popup window. However, before clicking “OK”, a form verification was required. At this time, the form verification failed, but the popup window was closed, so I recorded the debugging solution here

Solution steps:

- Use the API's 'beforeClose' to implement validation without closing popover - use variables to close popover on successful validation of the formCopy the code

The beforeClose implementation of the API does not close the popover for validation

Note:

  • beforeCloseforPromiseorbooleantype
  • van-dialogThe defaultz-index Is 100, larger than toast, so change the Dialog’s Z-index to 10

The main code is as follows

<template> <van-dialog class="logistics-dialog" z-index="10" use-slot show="{{ show }}" show-cancel-button bind:confirm="saveLogistics" before-close="{{beforeClose}}" bind:close="closeDialog" > <view style="margin:48rpx 0; padding: 0 24rpx"> <van-field required IS-link bindtap="openType" value="{{shipperName}}" placeholder=" Please select logistics company "> </van-field> <van-field required value="{{logisticsCode}}" placeholder=" Bind :change="changeLogisticsCode" ></van-field> </view> </van-dialog> </template> <script> export default class Factory extends wepy.page { data = { beforeClose: {}, show: false, postTypeShow: false, postTypeArr: [], logisticsCode: '', shipperName: '', shipperCode: "', } onLoad() { this.beforeClose = (action) => new Promise((resolve) => { setTimeout(() => { if (action === 'confirm') { // Intercept the confirmation operation resolve(false); } else { resolve(true); }}, 0); }); }; } </script>Copy the code

When the form validates successfully, the close popover method is called manually

The following code

closeDialog() { this.show = false; this.postTypeShow = false; this.shipperCode = ''; this.shipperName = ''; this.logisticsCode = ''; this.orderInfoId = []; }, saveLogistics() {// check if (! This.shippercode) {toast.fail (' Please select logistics company '); } else if (! This.logisticscode) {toast.fail (' Please enter logistics number '); } else { let param = { logisticsCode: this.logisticsCode, orderInfoId: this.orderInfoId, shipperCode: This.shippercode} saveLogisticsCode(param).then(res => {if (res.code === 200) {toast.success (' change the shipperCode successfully '); this.getManufactorOrder(true); } this.closeDialog() ; })}},Copy the code

Results the following