element-ui中input组件的autofocus自动聚焦不生效

element-ui 的 el-input 组件的 autofocus 属性在某些情况下不能实现自动聚焦,有几个可能的原因:

1. autofocus 在移动设备上不被支持。如果是在移动设备上访问,autofocus 不会生效。

2. autofocus 只在页面首次加载时生效。如果通过 vue 路由切换到该页面,autofocus 不会再生效。

3. autofocus 需要在 DOM 渲染完成后生效,如果 DOM 还没有加载完成,则不会生效。

4. modal/dialog 等组件打开时,原页面的 DOM 会被销毁重建,此时 autofocus 也会失效。

要解决这个问题,可以使用 Vue 的 $nextTick 方法,在 DOM 更新后手动触发输入框的 focus 方法:

vue
<el-input v-model="input" ref="input" />

<script>
export default {
  mounted() {
    this.$nextTick(() => {
      this.$refs.input.focus()
    })
  }
}
</script>

通过这种方式,无论是什么情况,都可以成功触发输入框的聚焦。

所以对于你在模态框中使用 el-input,autofocus 不生效的问题,使用 $nextTick 手动触发 focus 方法是一种很好的解决方案。

希望这能帮助到你!