如何在 datepicker vue material 上设置 onfocus？

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");
      };
},

一个好的解决方案应该在模板代码中加入“onfocus”。

Answer 1

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

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

模板：

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

脚本：

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

如何在 datepicker vue material 上设置 onfocus？

How to set onfocus on datepicker vue material?

vue.js

vuejs2

vue-material