如何在字段焦点上打开 vuejs datepicker？

Question

只有当我点击它的输入字段时，vuejs 日期选择器才会打开。当我通过按上一个字段中的 Tab 键专注于它的字段时，我希望它弹出。

我在 Whosebug 上寻找解决方案，但找不到任何类似的东西。

这是我的代码：

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 键时，焦点都会转到日期选择器字段，但只有当我使用鼠标单击它时才会弹出选择器。而我希望它每次都在焦点上打开。有人可以帮忙吗？

Answer 1

我查看了源代码。焦点事件未绑定，因此您可以就此提出问题。但是你可以通过以下方式实现效果：

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

以及方法：

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

另一种选择是通过 mixin 修改插件 a，您可以在其中修改 showCalendar 当前切换日历可见性的方法以仅允许其打开日历：

let myDatepicker = {
    mixins: [datepicker],

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

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

Answer 2

我在使用建议的 mixin 时遇到了一些问题，我对其进行了修改并在下面提供了一个完整的工作示例。

如果用户单击或跳转到该字段，他们将不会看到闪烁，并且日历只会打开一次。

<template>
    <toggleDatepicker
        ref="datepicker"
        @focusin.native="showCalendar"
        />    
</template>
<script>
    import Datepicker from 'vuejs-datepicker';
    let toggleDatepicker = {
        mixins: [Datepicker],
        methods: {
            showCalendar(){
                if(this.isOpen) return;
                return Datepicker.methods.showCalendar.apply(this);
            }
        }
    };

    export default {
        components: {toggleDatepicker},
        methods: {
            showCalendar() {
                this.$refs.datepicker.$children[0].$emit('showCalendar')
            },
        },

    }
</script>

这是基于：

vuejs-日期选择器：^1.6.2

如何在字段焦点上打开 vuejs datepicker？

How to open vuejs datepicker on field focus?

vue.js

vuejs2

vuejs-datepicker