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

ops/2025/2/5 22:54:48/

文章目录

    • 现象
    • 两次nextTick()加setTimeout()解决
    • 结论

现象

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

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


http://www.ppmy.cn/ops/155993.html

相关文章

C++滑动窗口技术深度解析:核心原理、高效实现与高阶应用实践

目录 一、滑动窗口的核心原理 二、滑动窗口的两种类型 1. 固定大小的窗口 2. 可变大小的窗口 三、实现细节与关键点 1. 窗口的初始化 2. 窗口的移动策略 3. 结果的更新时机 四、经典问题与代码示例 示例 1&#xff1a;和 ≥ target 的最短子数组&#xff08;可变窗口…

python学opencv|读取图像(五十六)使用cv2.GaussianBlur()函数实现图像像素高斯滤波处理

【1】引言 前序学习了均值滤波和中值滤波&#xff0c;对图像的滤波处理有了基础认知&#xff0c;相关文章链接为&#xff1a; python学opencv|读取图像&#xff08;五十四&#xff09;使用cv2.blur()函数实现图像像素均值处理-CSDN博客 python学opencv|读取图像&#xff08;…

DeepSeek 的含金量还在上升

大家好啊&#xff0c;我是董董灿。 最近 DeepSeek 越来越火了。 网上有很多针对 DeepSeek 的推理测评&#xff0c;除此之外&#xff0c;也有很多人从技术的角度来探讨 DeepSeek 带给行业的影响。 比如今天就看到了一篇文章&#xff0c;探讨 DeepSeek 在使用 GPU 进行模型训练…

CNN的各种知识点(四): 非极大值抑制(Non-Maximum Suppression, NMS)

非极大值抑制&#xff08;Non-Maximum Suppression, NMS&#xff09; 1. 非极大值抑制&#xff08;Non-Maximum Suppression, NMS&#xff09;概念&#xff1a;算法步骤&#xff1a;具体例子&#xff1a;PyTorch实现&#xff1a; 总结&#xff1a; 1. 非极大值抑制&#xff08;…

Linux环境下的Java项目部署技巧:Nginx 详解

Nginx 的启动 Nginx 启动会生成 2 个进程&#xff1a;主进程与守护进程 主进程&#xff1a;常用于提供反向代理服务。特点&#xff1a;占内存大守护进程&#xff1a;防止主进程以外关闭。特点&#xff1a;占内存小 Nginx 启动需要占用 80 端口: 当 Ngnix 启动失败时&#xff0…

联想拯救者R720笔记本外接显示屏方法,显示屏是2K屏27英寸

现在某品牌的13/14代&#xff08;CPU是13或14开头&#xff09;CPU缩肛有设计质量问题、CPU容易氧化易损坏易蓝屏等问题&#xff0c;现在大家买笔记本或台式电脑请不要考虑这两代CPU&#xff0c;或考虑AMD的CPU。 晚上23点10分前下单&#xff0c;第二天上午显示屏送到&#xff…

Dest1ny攻防实战:SpringBoot 脱敏属性***明文获取

今天是dest1ny攻防实战&#xff01; 脱敏springboot敏感数据&#xff01;&#xff01; 大家多多支持&#xff0c;多多点赞&#xff0c;多多关注&#xff01;&#xff01; 谢谢大家&#xff0c;下面我们来看今天的内容&#xff01; 1.前言 SpringBoot敏感信息泄露&#xff0…

【棋弈云端】网页五子棋项目测试报告

目录 一、项目背景1.1 项目简介1.2 应用技术 二、项目功能2.1 用户管理功能2.2 游戏对战功能 三、测试报告3.1 功能测试3.1.1注册功能测试3.1.2 登录功能测试3.1.3 匹配和落子测试 3.2 界面测试3.3 性能测试3.4 自动化测试3.4.1 创建驱动对象3.4.2 自动化检测注册功能3.4.3 自动…