Vue.js 引导vue如何在b下拉列表中包含b-form-datepicker

我正在构建一个下拉菜单日期选择器，希望允许用户输入一个日期范围或选择一个预定的日期范围

有没有办法将b-form-datepicker包含在b-dropdown中？当我试图打开日期选择器时，下拉菜单关闭。我已尝试阻止默认关闭操作，但这样做时，我无法使用日期选择器。任何帮助或指导都将不胜感激

下面是一个简单的例子，展示了我想要做的事情

newvue({
el:“#应用程序”，
数据（）{
返回{
startDate:null，
结束日期：空
}
},
方法：{
注册表单击鼠标（）{
log（“单击此项”）
}
}
})

三个月
6个月
开始
终点

尝试在下拉列表中使用

@hide

禁用正常单击/关闭，并创建一个新按钮以触发关闭下拉列表

由于对这个问题没有太多的支持，你可能想考虑使用一个模态或一些其他的BV分量。 模板：

<template>
  <div id="app">
    <div> {{ startDate }} </div>
    <div> {{ endDate }} </div>
    <div> {{ isCloseable }} </div>
    <b-dropdown id="dropdown-divider" ref='dropdown' text="Dropdown with divider" menu-class="w-100" class="w-100" @hide='handleHide($event)' @hidden='isCloseable=false'>
      <template v-slot:default>
        <b-dropdown-item>3 months</b-dropdown-item>
        <b-dropdown-item>6 months</b-dropdown-item>
        <b-row>
          <b-col cols="12" class="my-2" >
          Start
              <b-form-datepicker
                  id="datepicker-dateformat1"
                  ref="date1"
                  :date-format-options="{ year: 'numeric', month: 'numeric', day: 'numeric' }"
                  locale="en"
                  v-model="startDate"
               ></b-form-datepicker>
          </b-col>
          <b-col>
          End
              <b-form-datepicker
                  id="datepicker-dateformat2"
                  :date-format-options="{ year: 'numeric', month: 'numeric', day: 'numeric' }"
                  locale="en"
                  v-model="endDate"
               ></b-form-datepicker>
          </b-col>
        </b-row>
        <b-dropdown-item @click='closeMe()'>Close me</b-dropdown-item>

      </template>
    </b-dropdown>
  </div>

</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';


@Component({
  components: {

  },
})

export default class HelloWorld extends Vue {
  startDate = null
  endDate = null
  isCloseable = false;

  handleHide(bvEvent) {
    if (!this.isCloseable) {
      bvEvent.preventDefault();  
    } else {
      this.$refs.dropdown.hide();
    }
  }

  closeMe() {
    this.isCloseable = true;
    this.$refs.dropdown.hide();
  }

}
</script>

{{startDate}}
{{endDate}}
{{isCloseable}}
三个月
6个月
开始
终点
关上我

脚本：

<template>
  <div id="app">
    <div> {{ startDate }} </div>
    <div> {{ endDate }} </div>
    <div> {{ isCloseable }} </div>
    <b-dropdown id="dropdown-divider" ref='dropdown' text="Dropdown with divider" menu-class="w-100" class="w-100" @hide='handleHide($event)' @hidden='isCloseable=false'>
      <template v-slot:default>
        <b-dropdown-item>3 months</b-dropdown-item>
        <b-dropdown-item>6 months</b-dropdown-item>
        <b-row>
          <b-col cols="12" class="my-2" >
          Start
              <b-form-datepicker
                  id="datepicker-dateformat1"
                  ref="date1"
                  :date-format-options="{ year: 'numeric', month: 'numeric', day: 'numeric' }"
                  locale="en"
                  v-model="startDate"
               ></b-form-datepicker>
          </b-col>
          <b-col>
          End
              <b-form-datepicker
                  id="datepicker-dateformat2"
                  :date-format-options="{ year: 'numeric', month: 'numeric', day: 'numeric' }"
                  locale="en"
                  v-model="endDate"
               ></b-form-datepicker>
          </b-col>
        </b-row>
        <b-dropdown-item @click='closeMe()'>Close me</b-dropdown-item>

      </template>
    </b-dropdown>
  </div>

</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';


@Component({
  components: {

  },
})

export default class HelloWorld extends Vue {
  startDate = null
  endDate = null
  isCloseable = false;

  handleHide(bvEvent) {
    if (!this.isCloseable) {
      bvEvent.preventDefault();  
    } else {
      this.$refs.dropdown.hide();
    }
  }

  closeMe() {
    this.isCloseable = true;
    this.$refs.dropdown.hide();
  }

}
</script>

从“Vue属性装饰器”导入{Component，Vue}；
@组成部分({
组成部分：{
},
})
导出默认类HelloWorld扩展Vue{
startDate=null
endDate=null
isCloseable=false；
handleHide（bvEvent）{
如果（！this.isCloseable）{
bvEvent.preventDefault（）；
}否则{
这是。$refs.dropdown.hide（）；
}
}
closeMe（）{
this.isCloseable=true；
这是。$refs.dropdown.hide（）；
}
}