一、bug复现：
引入popup组件，时间选择组件
json>
"usingComponents": { "van-datetime-picker": "@vant/weapp/datetime-picker/index", "van-popup": "@vant/weapp/popup/index" }页面想实现，更改预定时间的效果，即遮罩层嵌套时间选择组件
wxml>
预定时间: {{ filter.formatTime(currentDate) }} js>
Page({ data: { show: false, minHour: 10, maxHour: 20, minDate: new Date().getTime(), maxDate: new Date(2119, 10, 1).getTime(), currentDate: new Date().getTime() }, showPopup() { this.setData({ show: true }); }, onClose() { this.setData({ show: false }); }, confirm() { ...//省略业务代码 this.setData({ show: false }); },});实际效果：
单击时间时正常出现弹框（遮罩及时间）
但是点击确认/取消都是闪一下仍旧保持此页面，弹框不消失。
二、调试过程：
1、试了下使用
this.setData({ show: !this.data.show });的方式来改show，点击取消时有用，点击确定时没用
2、首先测试show是否根据业务正常改值了
在更改show前后加入console打印
onClose() { console.log('onClose') console.log(this.data.show) this.setData({ show: false }); console.log(this.data.show) },反复点击取消，每次都是结果 ：true false
也就是js方法没有问题，每次点击取消的时候，值都是true
3、为了更直观，在页面检测show，观察是否传新值到页面
预定时间:{{show}} {{ filter.formatTime(currentDate) }} {{show}} 页面初始化时，一级页面show为false
点击出现遮罩层后，遮罩层页面show为true（与页面）
发现console的show为false时，页面微闪后，遮罩层页面的show仍是true
之前uniapp写代码时，遇到过showToast中不能向父组件直接赋值，
之前还遇到过样式本来设置不成功，但是加了父级view就可以控制的情况，
故推测跟父子组件有关系
三、解决方法
仔细看了代码，把弹出遮罩层的 【bindtap="showPopup"】换到了class="date"后
预定时间:{{show}} {{ filter.formatTime(currentDate) }} {{show}} 使弹出方法和遮罩层平级
果然遮罩层正常了（点击“确定”或黑色遮罩处，弹框消失），但是取消按钮仍无效
在“onClose”中没有打印出console，说明点击取消并没有调用方法“onClose”
那就是bind:cancle这个方法的问题了
这里回调参数是个 "-"，也不知道是什么意思，没时间猜了，所以直接把“取消”删了。加一个【cancel-button-text=""】
预定时间: {{ filter.formatTime(currentDate) }} 这就是最终正常运行的代码
有知道如何优雅的让“取消”按钮起到真正作用的，麻烦告诉我一下，谢谢
来源地址：https://blog.csdn.net/weixin_45752941/article/details/128970946
