简介
在Dialog组件中，默认插槽是Form表单，表单子项是input,发现Dialog组件弹出时无法获取input焦点。文章来源：https://www.toymoban.com/news/detail-532288.html
解决办法
- 需要使用俩次nextTick
- 使用定时器setTimeout也可以
分析结论
input获取焦点老生常谈的问题，直接一个nextTick完活！这里不行的原因是Dialog里面嵌套是Form表单,Form表单又嵌套的input组件，所以需要俩次下一次DOM更新后,第一次nextTick等待Form加载，第二次nextTick是等待input加载。文章来源地址https://www.toymoban.com/news/detail-532288.html
示例代码
//html
<el-dialog v-model="dialogFormVisible" :title="roleParams.id ? '修改角色' : '添加角色'">
<el-form>
<el-form-item label="角色名称" style="width: 80%">
<el-input v-model="roleParams.roleName" ref="inputFocus" />
</el-form-item>
</el-form>
</el-dialog>
//ts
const addRole = () => {
dialogFormVisible.value = true;
nextTick(()=>{
nextTick(()=>{
inputFocus.value.focus()
})
})
};
到了这里，关于Element Plus Dialog中无法获取表单焦点的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
