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键，焦点就会移至datepicker字段，但选择器仅在我使用鼠标单击时弹出。而我希望它每次都专注于打开。有人可以帮忙吗？

Answer 1

我查看了源代码。.焦点事件未绑定，因此您可能会遇到一个问题。但是您可以通过以下方式达到效果：

<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)
        }
    }
}

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-datepicker：^1.6.2

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

2 个答案: