Vue3中Element Plus组件库el-eialog弹框中的input无法获取表单焦点的解决办法

最新推荐文章于 2025-04-14 16:10:33 发布

彭世瑜

最新推荐文章于 2025-04-14 16:10:33 发布

阅读量568

点赞数 10

文章标签： vue.js 前端 javascript

本文为博主原创文章，欢迎转载，请注明出处

本文链接：https://blog.csdn.net/mouday/article/details/140085619

版权

以下是vue.js官网给出的示例

<script setup>
import { ref, onMounted } from 'vue'

// 声明一个 ref 来存放该元素的引用
// 必须和模板里的 ref 同名
const input = ref(null)

onMounted(() => {
  input.value.focus()
})
</script>

<template>
  <input ref="input" />
</template>

如果组件在el-dialog弹框中使用，应该改为如下写法，才能正常获取焦点

<template>
  <input ref="input" />
</template>

<script setup>
import { ref, onMounted } from 'vue'

// 声明一个 ref 来存放该元素的引用
// 必须和模板里的 ref 同名
const input = ref(null)

onMounted(() => {
  nextTick(() => {
    nextTick(() => {
      input.value.focus();
    });
  });
})
</script>