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,一经查实,立即删除!

相关文章

如何在Vue3项目中使用Pinia进行状态管理

**第一步&#xff1a;安装Pinia依赖** 要在Vue3项目中使用Pinia进行状态管理&#xff0c;首先需要安装Pinia依赖。可以使用以下npm命令进行安装&#xff1a; bash npm install pinia 或者如果你使用的是yarn&#xff0c;可以使用以下命令&#xff1a; bash yarn add pinia *…

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++:std::function的libc++实现

std::function是个有点神奇的模板&#xff0c;无论是普通函数、函数对象、lambda表达式还是std::bind的返回值&#xff08;以上统称为可调用对象&#xff08;Callable&#xff09;&#xff09;&#xff0c;无论可调用对象的实际类型是什么&#xff0c;无论是有状态的还是无状态…

【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;//打…

关于考摩托车驾照

刚通过了摩托车驾照考试&#xff0c;说两句。 1、在哪儿考试就要搞清楚当地的规定&#xff0c;不要以为全国要求都一样。 2、首先是报驾校。虽然至少有些地方允许自学后&#xff08;不报驾校&#xff09;考试&#xff0c;但报驾校听听教练说的&#xff0c;还是能提高通过率&a…

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

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

Django靓号管理系统:实现用户列表功能

在本篇博文中,我们将介绍如何在Django靓号管理系统中实现用户列表功能。这个功能允许管理员查看系统中所有用户的基本信息。我们将逐步讲解如何设置URL路由、创建视图函数以及设计模板。 1. 设置URL路由 首先,我们需要在​​urls.py​​文件中添加一个新的URL路径,以便访问…

云计算【第一阶段(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命令以树形结构列出…

CentOS系统日志入门

日志清单 系统的引导日志:/var/log/boot.log核心启动日志:/var/log/dmesg系统报错日志:/var/log/messages邮件系统日志:/var/log/maillogFTP系统日志:/var/log/xferlog安全信息和系统登录与网络连接的信息:/var/log/secureNews日志:/var/log/spoolerRPM软件包:/var/log/rpmpkg…

Android 常用ADB命令

文章目录 Android 常用ADB命令概述adb 的工作原理命令adb命令shell命令 使用adb服务器操作设备操作应用文件操作activity操作日志操作 Android 常用ADB命令 概述 Android 调试桥 (adb) 是一种功能多样的命令行工具&#xff0c;可让您与设备进行通信。adb 命令可用于执行各种设…

Avue框架学习

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

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

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

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

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

python基础:高级数据类型:集合

1、集合的定义 集合是一个无序且无重复元素的列表。其定义与数学定义一致。其无序和不重复和字典特征类似&#xff0c;但是无“值”。 2、集合的创建 集合一般由列表创建&#xff0c;在初始化列表时保证其元素唯一性&#xff0c;即为集合。 创建方法&#xff1a;x set(list…

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

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

GitHub每周最火火火项目(6.24-6.30)

项目名称&#xff1a;dortania / OpenCore - Legacy - Patcher 项目介绍&#xff1a;该项目旨在让用户体验如同以前一样的macOS。它可能提供了一种方式来解决在某些情况下&#xff0c;用户无法正常使用或升级macOS的问题。通过使用OpenCore - Legacy - Patcher&#xff0c;用户…

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;…