如何在 datepicker vue 材料上设置 onfocus?

分享于2023年05月08日 vue-material vue.js vuejs2 问答
【问题标题】:How to set onfocus on datepicker vue material?如何在 datepicker vue 材料上设置 onfocus?
【发布时间】:2023-05-06 04:41:02
【问题描述】:

我正在尝试编写一个函数,以便在日期选择器获得焦点时执行,但我不知道如何。

这是我的页面代码:

我有一个工作代码,但我认为这不是更好的解决方案:

mounted(){

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

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


【解决方案1】:

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

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

模板:


脚本:

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

【讨论】:

  • 您的解决方案适用于“md-input”组件,但不适用于“md-datepicker”。它看起来像 vue 材料日期选择器中的一个错误。
  • @Beetlejuice 这可能不是一个错误,事件冒泡可能只是在 md-picker 组件内的某处停止( event.stopPropagation() )。您可以尝试改用 click 事件。或者继续使用 focusin 事件并使用捕获 @focusin.capture="onBirthDateFocus(...)" 。这种方式事件处理程序将首先在父组件上调用,子组件不会阻塞它。
  • 我将@focusin="onBirthDateFocus($event)" 放在“div”元素中,现在它会冒泡......我认为这已经足够了,但很奇怪。
  • @Beetlejuice 现在我发现问题是由于缺少自定义组件 ( vuejs.org/v2/guide/… ) 所需的 .native 修饰符引起的。您可能不必再使用 .capture 。我更新了我的答案。