Vue3中Element Plus组件库el-eialog弹框中的input无法获取表单焦点的解决办法

以下是vue.js官网给出的示例

<script setup>
import { ref, onMounted } from 'vue'// 声明一个 ref 来存放该元素的引用
// 必须和模板里的 ref 同名
const input = ref(null)onMounted(() => {input.value.focus()
})
</script><template><input ref="input" />
</template>

如果组件在el-dialog弹框中使用,应该改为如下写法,才能正常获取焦点

<template><input ref="input" />
</template><script setup>
import { ref, onMounted } from 'vue'// 声明一个 ref 来存放该元素的引用
// 必须和模板里的 ref 同名
const input = ref(null)onMounted(() => {nextTick(() => {nextTick(() => {input.value.focus();});});
})
</script>

关键是调用2次nextTick

参考
vue3 Element Plus Dialog中的input无法获取表单焦点,需要使用两次nextTick()!!!父组件调用子组件自动获取焦点,无法实现!!!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/37272.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Tomcat的安装和虚拟主机和context配置

一、 安装Tomcat 注意&#xff1a;安装 tomcat 前必须先部署JDK 1. 安装JDK 方法1&#xff1a;Oracle JDK 的二进制文件安装 [rootnode5 ~]# mkdir /data [rootnode5 ~]# cd /data/ [rootnode5 data]# rz[rootnode5 data]# ls jdk-8u291-linux-x64.tar.gz [rootnode5 data]…

【C++】string基本用法(常用接口介绍)

文章目录 一、string介绍二、string类对象的创建&#xff08;常见构造&#xff09;三、string类对象的容量操作1.size()和length()2.capacity()3.empty()4.clear()5.reserve()6.resize() 四、string类对象的遍历与访问1.operator[ ]2.正向迭代器begin()和end()3.反向迭代器rbeg…

QTableView与QSqlQueryModel的简单使用

测试&#xff1a; 这里有一个sqlite数据库 存储了10万多条数据&#xff0c;col1是1,col2是2. 使用QSqlQueryModel和QTableView来显示这些数据&#xff0c;也非常非常流畅。 QString aFile QString::fromLocal8Bit("E:/桌面/3.db");if (aFile.isEmpty())return;//打…

计算机图形学笔记----矩阵

矩阵和标量的运算 ,则 矩阵与矩阵相乘 的矩阵A&#xff0c;的矩阵B。两矩阵&#xff0c;结果为的矩阵&#xff0c;第一个矩阵的列数必须和第二个矩阵的行数相同&#xff0c;否则不能相乘 &#xff0c;中的每个元素等于A的第i行所对应的矢量和B的第j列所对应的矢量进行矢量点…

云计算【第一阶段(22)】Linux的进程和计划任务管理

目录 一、查看进程 1.1、程序和进程的关系 1.2、查看进程 1.2.1、静态查看进程信息ps ​编辑 1.2.1.1、实验 1.2.2、动态查看进程信息top 1.2.2.1、实验 1.2.2.2、top 命令全屏操作界面快捷键 1.2.3、pgrep根据特定条件查询进程pid信息 1.2.4、pstree命令以树形结构列出…

Avue框架学习

Avue框架学习 我们的项目使用的框架是 Avue 在我看来这个框架最大的特点是可以基于JSON配置页面上的From,Table以及各种各样的输入框等,不需要懂前端就可以很快上手,前提是需要多查一下文档 开发环境搭建 由于我本地的环境全是用docker来搭建的,所以我依然选择用docker搭建我…

万字浅析视频搜索系统中的多模态能力建设

万字浅析视频搜索系统中的多模态能力建设 FesianXu 20240331 at Tencent WeChat search team 前言 视频搜索是天然的富媒体检索场景&#xff0c;视觉信息占据了视频的一大部分信息量&#xff0c;在视频搜索系统中引入多模态能力&#xff0c;对于提高整个系统的能力天花板至关重…

机器人控制系列教程之任务空间运动控制器搭建(1)

任务空间运动控制简介 任务空间运动控制—位置被指定给控制器作为末端执行器的姿态。然后&#xff0c;控制器驱动机器人的关节配置到使末端执行器移动到指定姿态的值。这有时被称为操作空间控制。 任务空间运动模型表示机器人在闭环任务空间位置控制下的运动&#xff0c;可使用…

汽车电子工程师入门系列——AUTOSAR通信服务框架(下)

我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 屏蔽力是信息过载时代一个人的特殊竞争力,任何消耗你的人和事,多看一眼都是你的不对。非必要不费力证明自己,无利益不试图说服别人,是精神上的节…

python格式文件

python小白考后复习 CSV格式文件ini格式文件我们可以读取所有节点还可以输出一个节点下所有键值对组成的元组获取节点下的键对应的值判断节点是否存在添加节点还可以添加键值还可以删除节点 XML格式文件读取若是文件格式存在的xml若是以字符串形式存在的xml获取子标签还有获取子…

【分布式计算框架 MapReduce】高级编程—搜索日志数据分析

目录 一、对于 sogou_500w_utf 数据&#xff0c;使用 MapReduce 编程模型完成对以下数据的分析任务 1. 统计 2011-12-30 日搜索记录&#xff0c;每个时间段的搜索次数 &#xff08;1&#xff09;运行截图 &#xff08;2&#xff09; 源代码 2. 统计 2011-12-30 日 3 点至 …

2024最新初级会计职称题库来啦!!!

16.根据增值税法律制度的规定&#xff0c;下列各项中&#xff0c;属于"提供加工、修理修配劳务"的是&#xff08;&#xff09;。 A.修理小汽车 B.修缮办公楼 C.爆破 D.矿山穿孔 答案&#xff1a;A 解析&#xff1a;选项AB&#xff1a;修理有形动产&#xff08;…

【PL理论深化】(13) 变量与环境:文法结构 | 真假表达式:isZero E | let 表达式叠放 | 定义的规则 | 条件语句的使用

&#x1f4ac; 写在前面&#xff1a;从现在开始&#xff0c;让我们正式设计和实现编程语言。首先&#xff0c;让我们扩展在之前定义的整数表达式语言&#xff0c;以便可以使用变量和条件表达式。 目录 0x00 文法结构 0x01 真假表达式&#xff1a;isZero E 0x02 let 表达式叠…

Elasticsearch 第四期:搜索和过滤

序 2024年4月&#xff0c;小组计算建设标签平台&#xff0c;使用ES等工具建了一个demo&#xff0c;由于领导变动关系&#xff0c;项目基本夭折。其实这两年也陆陆续续接触和使用过ES&#xff0c;两年前也看过ES的官网&#xff0c;当时刚毕业半年多&#xff0c;由于历史局限性导…

ArtTS系统能力-通知的学习(3.1)

上篇回顾&#xff1a; ArtTS语言基础类库-容器类库内容的学习(2.10.2&#xff09; 本篇内容&#xff1a; ArtTS系统能力-通知的学习&#xff08;3.1&#xff09; 一、 知识储备 1. 基础类型通知 按内容分成四类&#xff1a; 类型描述NOTIFICATION_CONTENT_BASIC_TEXT普通文…

2024 Parallels Desktop for Mac 功能介绍

Parallels Desktop的简介 Parallels Desktop是一款由Parallels公司开发的桌面虚拟化软件&#xff0c;它允许用户在Mac上运行Windows和其他操作系统。通过强大的技术支持&#xff0c;用户无需重新启动电脑即可在Mac上运行Windows应用程序&#xff0c;实现了真正的无缝切换。 二…

普元EOS学习笔记-创建精简应用

前言 本文依旧基于EOS8.3进行描述。 在上一篇文章《EOS8.3精简版安装》中&#xff0c;我们了解到普元预编译好的EOS的精简版压缩包&#xff0c;安装后&#xff0c;只能进行低开&#xff0c;而无法高开。 EOS精简版的高开方式是使用EOS开发工具提供的IDE&#xff0c;创建一个…

东软睿驰总裁兼CTO杜强受邀出席 CICV 2024智能网联汽车技术首脑(CTO)闭门峰会

近日&#xff0c;第十一届国际智能网联汽车技术年会&#xff08;CICV 2024&#xff09;在北京举办&#xff0c;会议期间组织智能网联汽车技术首脑&#xff08;CTO&#xff09;闭门峰会&#xff0c;邀请40余位技术领袖围绕智能网联汽车产业生态建设以及智能网联汽车数据、算力和…

Python的numpy简单使用

1.可以调用引入numpy里面的函数&#xff0c;如add可以把俩数相加&#xff0c;也可以创建一个数组arr&#xff0c;arr.shape是数组arr的属性&#xff0c;如果后有跟&#xff08;&#xff09;就是里面的一个函数 type()函数可以知道里面是什么类型 变量.shape可以知道这个变量是…

基于决策树的旋转机械故障诊断(Python)

前置文章&#xff1a; 将一维机械振动信号构造为训练集和测试集&#xff08;Python&#xff09; https://mp.weixin.qq.com/s/DTKjBo6_WAQ7bUPZEdB1TA 旋转机械振动信号特征提取&#xff08;Python&#xff09; https://mp.weixin.qq.com/s/VwvzTzE-pacxqb9rs8hEVw import…