一、bug复现：

引入popup组件，时间选择组件

json>

"usingComponents": {
        "van-datetime-picker": "@vant/weapp/datetime-picker/index",
        "van-popup": "@vant/weapp/popup/index"
      }

页面想实现，更改预定时间的效果，即遮罩层嵌套时间选择组件

wxml>

<view bindtap="showPopup"> 
   预定时间:
   <view class="date">{{ filter.formatTime(currentDate) }}</view>
   <van-popup show="{{ show }}" bind:close="onClose" position="bottom">
   <van-datetime-picker type="datetime" value="{{currentDate}}" min-date="{{ minDate }}" max-date="{{ maxDate }}" bind:confirm="confirm" title="选择预约时间" bind:cancle="onClose"/>
   </van-popup>
</view>

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，观察是否传新值到页面

<view bindtap="showPopup"> 
   预定时间:{{show}}
   <view class="date">{{ filter.formatTime(currentDate) }}</view>
   <van-popup show="{{ show }}" bind:close="onClose" position="bottom">
    {{show}}
   <van-datetime-picker type="datetime" value="{{currentDate}}" min-date="{{ minDate }}" max-date="{{ maxDate }}" bind:confirm="confirm" title="选择预约时间" bind:cancle="onClose"/>
   </van-popup>
</view>

页面初始化时，一级页面show为false

点击出现遮罩层后，遮罩层页面show为true（与页面）

发现console的show为false时，页面微闪后，遮罩层页面的show仍是true

之前uniapp写代码时，遇到过showToast中不能向父组件直接赋值，

之前还遇到过样式本来设置不成功，但是加了父级view就可以控制的情况，

故推测跟父子组件有关系

三、解决方法

仔细看了代码，把弹出遮罩层的 【bindtap="showPopup"】换到了class="date"后

<view> 
   预定时间:{{show}}
   <view class="date" bindtap="showPopup">{{ filter.formatTime(currentDate) }}</view>
   <van-popup show="{{ show }}" bind:close="onClose" position="bottom">
    {{show}}
   <van-datetime-picker type="datetime" value="{{currentDate}}" min-date="{{ minDate }}" max-date="{{ maxDate }}" bind:confirm="confirm" title="选择预约时间" bind:cancle="onClose"/>
   </van-popup>
</view>

使弹出方法和遮罩层平级

果然遮罩层正常了（点击“确定”或黑色遮罩处，弹框消失），但是取消按钮仍无效

在“onClose”中没有打印出console，说明点击取消并没有调用方法“onClose”

那就是bind:cancle这个方法的问题了

这里回调参数是个 "-"，也不知道是什么意思，没时间猜了，所以直接把“取消”删了。加一个【cancel-button-text=""】

<view> 
   预定时间:
   <view class="date" bindtap="showPopup">{{ filter.formatTime(currentDate) }}</view>
   <van-popup show="{{ show }}" bind:close="onClose" position="bottom">
   <van-datetime-picker type="datetime" value="{{currentDate}}" min-date="{{ minDate }}" max-date="{{ maxDate }}" bind:confirm="confirm" title="选择预约时间" cancel-button-text=""/>
   </van-popup>
</view>

这就是最终正常运行的代码

有知道如何优雅的让“取消”按钮起到真正作用的，麻烦告诉我一下，谢谢