Vue中如何通过按钮控制vue-ctk-date-time-picker的开合？

这个组件未提供公开的显隐控制API，但可以通过Vue的ref获取组件实例，调用其内部的togglePicker（切换显隐）、openPicker（打开）、closePicker（关闭）方法实现需求。

场景1：外部按钮控制选择器显隐 #

给组件添加ref标识，在按钮点击事件中调用组件内部方法：

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <vue-ctk-date-time-picker
      ref="datePicker"
      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 @click="togglePicker">Toggle</button>
    <button @click="openPicker">Open</button>
    <button @click="closePicker">Close</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: 'Vue CTK Date Time Picker Control',
      theDate: null
    }
  },
  methods: {
    togglePicker() {
      this.$refs.datePicker.togglePicker()
    },
    openPicker() {
      this.$refs.datePicker.openPicker()
    },
    closePicker() {
      this.$refs.datePicker.closePicker()
    }
  }
}
</script>

场景2：内部插槽按钮控制显隐 #

同样通过ref获取组件实例，插槽内按钮绑定对应方法即可：

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <vue-ctk-date-time-picker
      ref="datePicker"
      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" :value="theDate" readonly />
      <button @click="togglePicker">Toggle</button>
    </vue-ctk-date-time-picker>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: 'Vue CTK Date Time Picker Slot Control',
      theDate: null
    }
  },
  methods: {
    togglePicker() {
      this.$refs.datePicker.togglePicker()
    }
  }
}
</script>

注意事项 #

• 上述调用的是组件内部未公开的方法，后续组件版本更新可能存在兼容性风险，需留意组件迭代变化。
• 若使用Vue 3，需用ref()函数获取组件实例，调用方式改为datePicker.value.togglePicker()。

内容的提问来源于stack exchange，提问作者Hitendra Rathore