使用Vue按钮点击来打开和关闭vue-ctk-date-time-picker

Question

我正在使用组件 - https://github.com/chronotruck/vue-ctk-date-time-picker 在我的组件中。我遇到的问题是，我希望保持组件不变，但在我的组件中的某个地方应该能够打开和关闭它，似乎组件没有提供任何这样的功能，有人可以帮助吗。

代码沙箱 - Sanbox

我正在做的事情 -

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <vue-ctk-date-time-picker
      v-model="theDate"
      :name="'Date'"
      :format="'YYYY-MM-DD'"
      :formatted="'DD MMM, YYYY'"
      :only-date="true"
      :data-vv-as="'date'"
      :first-day-of-week="1"
      :range="true"
    >
    </vue-ctk-date-time-picker>
    <button>Open</button>
  </div>
</template>

这个按钮需要在组件外部，并且应该能够打开和关闭选择器。

参考实际用例如下

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <vue-ctk-date-time-picker
      v-model="theDate"
      :name="'Date'"
      :format="'YYYY-MM-DD'"
      :formatted="'DD MMM, YYYY'"
      :only-date="true"
      :data-vv-as="'date'"
      :first-day-of-week="1"
      :no-value-to-custom-elem="false"
      :range="true"
    >
      <input type="text" /><button>Toggle</button>
    </vue-ctk-date-time-picker>
  </div>
</template>

切换按钮应该打开和关闭日期选择器。

感谢任何帮助。

Answer 1

---编辑---

将ref="pickerRef"添加到您的日期选择器组件中

并按照以下代码修改您的<button>，以触发和隐藏日期选择器。

<vue-ctk-date-time-picker
      v-model="theDate"
      ref="pickerRef"
      :name="'日期'"
      :format="'YYYY-MM-DD'"
      :formatted="'DD MMM, YYYY'"
      :only-date="true"
      :data-vv-as="'日期'"
      :first-day-of-week="1"
      :range="true"
      :no-value-to-custom-elem="false"
    >
</vue-ctk-date-time-picker>
<button
    type="button"
    @click="$refs.pickerRef.toggleDatePicker(), ($refs.pickerRef.persistent = true)"
    @blur="$refs.pickerRef.persistent = false"
>
    打开
</button>