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.pswp.cn/web/37272.shtml
繁體地址,請注明出處:http://hk.pswp.cn/web/37272.shtml
英文地址,請注明出處:http://en.pswp.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;…