我正在使用組件 - https://github.com/chronotruck/vue-ctk-date-time-picker 在我的組件中。我遇到的問題是,我希望保持組件不變,但在我的組件中的某個(gè)地方應(yīng)該能夠打開和關(guān)閉它,似乎組件沒有提供任何這樣的功能,有人可以幫助嗎。
代碼沙箱 - 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>
這個(gè)按鈕需要在組件外部,并且應(yīng)該能夠打開和關(guān)閉選擇器。
參考實(shí)際用例如下
<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>
切換按鈕應(yīng)該打開和關(guān)閉日期選擇器。
感謝任何幫助。
---編輯---
將ref="pickerRef"
添加到您的日期選擇器組件中
并按照以下代碼修改您的<button>
,以觸發(fā)和隱藏日期選擇器。
<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>