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

server/2025/2/2 0:38:29/

文章目录

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

相关文章

算法刷题Day29:BM67 不同路径的数目(一)

题目链接 描述 解题思路&#xff1a; 二维dp数组初始化。 dp[i][0] 1, dp[0][j] 1 。因为到达第一行第一列的每个格子只能有一条路。状态转移 dp[i][j] dp[i-1][j] dp[i][j-1] 代码&#xff1a; class Solution: def uniquePaths(self , m: int, n: int) -> int: #…

AI学习指南Ollama篇-使用Ollama构建自己的私有化知识库

一、引言 (一)背景介绍 随着企业对数据隐私和效率的重视,私有化知识库的需求日益增长。私有化知识库不仅可以保护企业数据的安全性,还能提供高效的知识管理和问答系统,提升企业内部的工作效率和创新能力。 (二)Ollama和AnythingLLM的结合 Ollama和AnythingLLM的结合…

使用国内镜像加速器解决 Docker Hub 拉取镜像慢或被屏蔽的问题

一、问题背景 Docker Hub 是 Docker 默认的镜像仓库&#xff0c;但由于网络限制&#xff0c;国内用户直接拉取镜像可能面临以下问题&#xff1a; 下载速度极慢&#xff08;尤其是大镜像&#xff09;。连接超时或完全被屏蔽&#xff08;部分网络环境&#xff09;。依赖国外源的…

简单的爱心跳动表白网页(附源码)

一&#xff1a;准备工作 在开始之前&#xff0c;确保已经具备基础的 HTML、CSS 和 JavaScript 知识。同时&#xff0c;也要准备好一个代码编辑器&#xff0c;比如 VS Code 或 Sublime Text。接下来&#xff0c;我们需要创建三个文件&#xff1a;index.html、styles.css 和 scr…

[ACTF2020 新生赛]Include1

题目 点击tips后&#xff1a; 使用PHP伪协议直接读取flag /?filephp://filter/readconvert.base64-encode/resourceflag.php base64解码 拿下flag flag{6cce5a3d-997a-4c8a-ba07-f6652ee462a9}

第05章 16 Implicit Function应用举例

Implicit Function在VTK中有多种广泛的应用场合&#xff0c;以下是一些主要的应用场景及其详细说明&#xff1a; 1. 几何裁剪&#xff08;Clipping&#xff09; Implicit Function可以用于对几何体进行裁剪&#xff0c;生成新的几何形状。裁剪操作通常基于一个Implicit Funct…

GPMC介绍

一、GPMC并口简介 GPMC(General Purpose Memory Controller)是TI处理器特有的通用存储器控制器接口&#xff0c;是AM335x、AM437x、AM5708、AM5728等处理器专用于与外部存储器设备的接口&#xff0c;如&#xff1a; ● 异步SRAM内存和专用集成电路(ASIC)设备。 ● 异步&…

【Unity】cinemachine核心知识

cinemachine核心知识 cinemachineVirtualCamera中body参数作用cinemachineVirtualCamera中body有哪些选项cinemachineVirtualCamera中am参数作用以及选项 cinemachineVirtualCamera中body参数作用 在 Unity 的 Cinemachine Virtual Camera 中&#xff0c;Body 参数模块主要负责…