vue3中el-input无法获得焦点的问题

文章目录

现象

el-input被外层div包裹了,设置autofocus不起作用:

html 复制代码
<el-dialog v-model="visible" :title="title" :append-to-body=true width="50%">
    <el-form v-model="theForm" @submit.prevent="submit">
      <el-form-item v-for="item in formItems" :label="item.label" :label-width="120">
        <el-input v-model="theForm[item.name]" ref="inputRef"
          autocomplete="off"           
          @keyup.enter.stop="submit"
          autofocus/>
      </el-form-item>
    </el-form>
    <template #footer>
        <span>
          <el-button type="primary" @click="cancel()">取消</el-button>
          <el-button type="primary" @click="submit()">确定</el-button>
        </span>
    </template>
  </el-dialog>

在onMounted()中尝试: inputRef.value.focus(),也无效。怀疑是调用时机不对,但何时才是页面dom都生成好的时机呢?

两次nextTick()加setTimeout()解决

javascript 复制代码
// 需要调用两次nextTick才能获得实例!!!
const focusInput = () => { nextTick(() => 
  nextTick(()=>{    
    setTimeout(function () {
      let _eles = document.querySelectorAll('form input.el-input__inner')
      // console.log(_eles)
      _eles[0].focus()
      // inputRef.value.focus()
    }, 100);
    
  }))}

onMounted(() => {
  focusInput()
})

结论

在vue3组件嵌套复杂时,很难确定组件之间的初始化顺序,这时尽可能让访问时机靠后是一个通用的解决方法。

相关推荐
TE-茶叶蛋几秒前
React-props
前端·javascript·react.js
安分小尧几秒前
[特殊字符] 超强 Web React版 PDF 阅读器!支持分页、缩放、旋转、全屏、懒加载、缩略图!
前端·javascript·react.js
EndingCoder3 分钟前
React从基础入门到高级实战:React 高级主题 - React Concurrent 特性:深入探索与实践指南
前端·javascript·react.js·前端框架
EndingCoder4 分钟前
React从基础入门到高级实战:React 生态与工具 - React Query:异步状态管理
前端·javascript·react.js·前端框架
TE-茶叶蛋5 分钟前
ReactJS 中的 JSX工作原理
前端·react.js·前端框架
水煮白菜王6 分钟前
React 编译器
前端·react.js·前端框架
霸王蟹6 分钟前
React 项目中封装 Excel 导入导出组件:技术分享与实践
前端·笔记·学习·react.js·typescript·excel·vite
wl_7 分钟前
react-color-palette源码解析
前端·react.js·调色板
集成显卡12 分钟前
图片压缩工具 | Electron+Vue3+Rsbuild开发桌面应用
前端·javascript·electron·vue
赵庆明老师16 分钟前
webpack打包基本配置
前端·webpack·node.js