微信小程序使用vant插件的DropdownMenu 下拉菜单自定义绑定关闭遮罩层方法

我这里需要在下拉菜单自定义一个日历组件.

van-calendar组件的bind:confirm方法里面可以调用逻辑代码.

但是我发现点击确定后遮罩层不关闭.

查看文档:

js代码:通过selectComponent获取组件;组件调用toggle()方法;

/**
       * 自定义关闭遮罩层
       * @param {*} event 
       */
      onConfirm(event) {
        var that = this;
        this.setData({
          show: false,
          date: util.formatDate(event.detail),
        });
        var showTwo = that.selectComponent('#search');
        console.log('组件',showTwo)
        showTwo.toggle(false);
        this.findByOdate(this.data.date);
      },

 wxml代码:

<van-dropdown-menu >
    <van-dropdown-item id="search" style="height: 100%" title="{{ date }}" bind:open="onDisplay" model:value="{{ date }}">
      <van-calendar :show-confirm="true" color="#07c160" show="{{ show }}" bind:close="onClose"
        bind:confirm="onConfirm" />
    </van-dropdown-item>
  </van-dropdown-menu>

这样就实现手动关闭.记得在van-calendar的 bind:close="onClose"方法里也调用关闭方法(这里是关闭日历时调用关闭遮罩层.).

/**
       * 关闭日历
       */
      onClose() {
        var that = this;
        var showTwo = that.selectComponent('#search');
        console.log('组件',showTwo)
        showTwo.toggle(false);
        this.setData({
          show: false
        });
      },

最后实现效果: