如何将焦点设置在日期选择器值材料上?

Question

我试图写一个函数执行时，日期选择器得到焦点，但我不知道如何。

这是我的页面代码:

<div class="md-layout-item md-small-size-100 md-size-22">
<md-datepicker v-model="birthDate" :md-open-on-focus="false" ref="birthDateEl">
<label>Birth date</label>
</md-datepicker>
</div>

我得到了一个工作代码，但我认为这不是更好的解决方案:

mounted(){
this.$refs.birthDateEl.$refs.input.$el.onfocus = function() {
this.onBirthDateFocus("some param");
};
},

一个好的解决方案应该放在"焦点"上。

Answer 1

您应该能够在<md-datepicker>上收听focusin事件，因为它会在元素树中冒泡(不像focus事件)。您还应该使用.native修饰符，这在侦听自定义组件上的本机事件时是必需的。

在事件处理函数中，您可能应该检查事件是否在表示日期拾取器的确切输入上触发。

模板:

<md-datepicker @focusin.native="onBirthDateFocus($event)" ...>

脚本:

methods: {
onBirthDateFocus(event) {
if (event.target.id === 'datePickerInput') {
/*...*/
}
}
}