Как открыть vuejs datepicker на поле фокусировки? - PullRequest
Новая
       19

Как открыть vuejs datepicker на поле фокусировки?

1 голос
/ 18 апреля 2019

Выбор даты vuejs открывается только тогда, когда я щелкаю его поле ввода.Я хочу, чтобы он всплывал, когда я фокусируюсь на его поле, нажимая вкладку из предыдущего поля.

Я искал решения для stackoverflow, но не смог найти ничего похожего.

Вот мой код:

const app = new Vue({
  el: '#app',
  components: {
  	vuejsDatepicker
  }
})
<div id="app">
  <input type="text" placeholder="Textbox" autofocus>
  <br><br>
  <vuejs-datepicker placeholder="Datepicker"></vuejs-datepicker>
</div>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vuejs-datepicker"></script>

Всякий раз, когда я нажимаю клавишу Tab после записи чего-либо в текстовое поле, фокус переходит в поле указателя даты, но средство выбора появляется только при щелчке по нему мышью.Принимая во внимание, что я хочу, чтобы это открывалось каждый раз в фокусе.Может кто-нибудь помочь, пожалуйста?

1 Ответ

2 голосов
/ 18 апреля 2019

Я посмотрел на источник. Событие focus не связано, поэтому вы можете открыть вопрос об этом.Но вы можете добиться эффекта следующим образом: 

<datepicker ref="dp1" @focusin.native="onfocusin"></datepicker>

И метод: 

methods: {
    onfocusin(){
        setTimeout((ev)=>{
            this.$refs.dp1.isOpen || this.$refs.dp1.showCalendar(ev);
        }, 50)
    }
}

Другой вариант - изменить плагин с помощью mixin, где вы можете изменить showCalendar метод, который в настоящее время переключает видимость календаря, чтобы позволить ему только открыть календарь: 

let myDatepicker = {
    mixins: [datepicker],

    methods: {
        showCalendar(){
            if(this.isOpen) return;

            return datepicker.showCalendar.apply(this, arguments)
        }
    }
}
...