vue3背景下，el-input嵌套在弹出框中，自动聚焦“失效”？如何实现自动聚焦

情景：在一个弹出框中，有一个el-input输入框，想要实现当弹出框出现时，input会自动聚焦。

使用input的原生属性autofocus去自动获取焦点失效；

使用ref获取el-input元素也显示 undefined ！！！

<el-dialog v-model="dialogFormVisible" width="300">  
        .......   
        <el-input v-model="category_name1" ref="input1"/>
        .......
</el-dialog>

先说结论：使用定时器！！

//script标签部分内容

const dialogFormVisible = ref(false)

//获取到input框
const input1 = ref()

//弹出框显示按钮事件
const openDialog =() => {
  dialogFormVisible.value = true
  setTimeout(()=>{input1.value.focus()},100) //在定时器中，延时调用input的聚焦
}

原因或许是，使用autofocus时，确实聚焦了！但是当我们又点击 显示弹出框的按钮时，input又失焦了，所以当我们看到input框时，没有自动聚焦。

所以，当我们使用定时器延时调用input的聚焦后，自动聚焦实现了。

至于使用ref获取el-input元素显示 undefined 的原因，目前我也一知半解，如你知道原因，希望

能得到你的帮助！

如果本文对你有帮助，希望能得到你的点赞或收藏或关注，这是对我最好的鼓励；

如你有问题或疑惑，欢迎在评论区写下，必将努力解答；

如本文有误区，希望你不吝赐教，让我们共勉！