如何在字段焦點上打開 vuejs datepicker？

Question

vuejs 日期選擇器僅在我單擊其輸入字段時打開。 當我通過按上一個字段中的 Tab 鍵專注於它的字段時，我希望它彈出。

我在 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 鍵時，焦點都會轉到日期選擇器字段，但只有當我使用鼠標單擊它時才會彈出選擇器。 而我希望它每次都在焦點上打開。 有人可以幫忙嗎？

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