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

devtools/2025/2/7 1:04:20/

文章目录

    • 现象
    • 两次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/devtools/156664.html

相关文章

openeuler 22.03 lts sp4 使用 cri-o 和 静态 pod 的方式部署 k8s-v1.32.0 高可用集群

前情提要 整篇文章会非常的长…可以选择性阅读,另外,这篇文章是自己学习使用的,用于生产,还请三思和斟酌 静态 pod 的部署方式和二进制部署的方式是差不多的,区别在于 master 组件的管理方式是 kubectl 还是 systemctl有 kubeadm 工具,为什么还要用静态 pod 的方式部署?…

linux——网络(服务器的永久不挂——守护进程)

文章目录 目录 文章目录 前言 一、前后台进程 1. 前台进程 (Foreground Process) 2. 后台进程 (Background Process) 3. 前后台进程的切换 4. 关键命令和操作 5. 注意事项 6. 信号处理 二、守护进程 1. 守护进程的核心特点 2. 常见守护进程示例 3.接口介绍 1、 fork() 2. sets…

深度学习|表示学习|卷积神经网络|NIN 相比普通 CNN|17

如是我闻&#xff1a; Network in Network (NIN) 是 2014 年由 Min Lin 等人 提出的一个改进 CNN 结构的模型。它的核心思想是&#xff1a;用小型的多层感知机&#xff08;MLP&#xff0c;Multi-Layer Perceptron&#xff09;替代传统 CNN 中的卷积层&#xff0c;从而提高网络的…

powershell编写一个简易的http服务器httpServer

文章目录 powershell一键启动检查相关进程 源码 powershell一键启动 一键启动脚本内容(powershell,兼容windows powershell和powershell7) irm https://gitee.com/xuchaoxin1375/scripts/raw/main/PS/Tools/Tools.psm1|iex sleep 0.5 help Start-HTTPServer #可以指定参数选择…

Rust场景示例:为什么要使用切片类型

通过对比 不用切片 和 使用切片 的场景&#xff0c;说明切片类型在 Rust 中的必要性&#xff1a; 场景&#xff1a;提取字符串中的单词 假设我们需要编写一个函数&#xff0c;从一个句子中提取第一个单词。我们将分别展示 不用切片 和 使用切片 的实现&#xff0c;并对比二者的…

单机性能调优中的程序优化

目录 一、系统框架的选择 二、程序优化 表单压缩 局部刷新 仅取所需 逻辑清晰 谨慎继承 程序算法优化 批处理 延迟加载 防止内存泄漏 减少大对象引用 防止争用死锁 存储过程 内存分配 并行 异步 缓存 单机优化顾名思义就是我们要在单机上对系统的性能进行调优…

8.PPT:小李-第二次世界大战【21】

目录 NO123 ​ NO4567 ​ NO8\9\10\11​ 图片→格式→大小对话框→锁定纵横比✔动画→飞入→效果选项&#xff1a;方向/序列→开始→持续时间→延迟时间持续时间&#xff1a;1s延迟&#xff1a;0.5s音频剪切时间&#xff1a;0.5s&#xff1a;00:00.500自动换片时间设置&…

javaEE初阶————多线程初阶(1)

多线程初阶———— 1&#xff0c;认识线程 1.1 概念 1&#xff09;线程是什么 线程就是一个“执行流”&#xff0c;可以理解为程序执行的最小单位&#xff1b; 可以看成轻量级的进程&#xff1b; 2&#xff09;为啥要有线程 “并发编程” 的需要&#xff0c;但是我们不…