如何为Vue flat-pickr组件设置焦点？原DOM方法失效求方案

直接通过document.getElementById("file_opened").focus()无法聚焦是因为你选中的是组件的根容器，而非flat-pickr实际渲染的输入框元素，或者没有调用组件内部的flatpickr实例方法。以下是几种可行方案：

方案一：通过组件ref调用实例focus方法 #

给flat-pickr组件添加ref属性，通过组件实例直接调用flatpickr内置的focus()方法：

<flat-pickr 
     v-model="date_opened"
     ref="datePicker"
     :config="flatpickr_config_date"
     :disabled="disableFileInfo" />

在需要触发聚焦的逻辑中执行：

// Vue 2
this.$refs.datePicker.flatpickr.focus()

// Vue 3（组合式API）
import { ref } from 'vue'
const datePicker = ref(null)
datePicker.value.flatpickr.focus()

方案二：直接选中内部输入框元素聚焦 #

flat-pickr渲染后会在组件容器内生成带.flatpickr-input类名的输入框，可通过精准选择器获取该元素并聚焦：

document.querySelector("#file_opened .flatpickr-input").focus()

注意：如果页面存在多个flat-pickr组件，需确保选择器能唯一定位目标元素，避免误操作。

方案三：通过config钩子保存实例再调用聚焦 #

在flatpickr的配置项中添加ready回调，保存实例引用，后续直接调用实例的focus()方法：

// 在组件的data或setup中定义配置
flatpickr_config_date: {
  // 其他配置项
  ready: function(instance) {
    this.datePickerInstance = instance
  }.bind(this) // Vue 2需绑定this，Vue 3可使用箭头函数
}

需要聚焦时执行：

this.datePickerInstance.focus()

内容的提问来源于stack exchange，提问作者Bill200