el-input 自动获取焦点

前言:

        需求描述:在 Dialog 对话框中 使用 input 组件;当点击按钮,Dialog 对话框显示,且里面的 input 组件要自动获取焦点。因为页面上还存在其他的 input 组件,所以使用 自动获取焦点属性没用!!

解决方案:

        使用了 Dialog 组件关闭即销毁属性还是不行,最后通过在 Dialog 组件上使用 v-if 达到自己想要的效果

 

<template><div class="search_box" @click="openDialog"><el-icon><Search /></el-icon><span>搜索</span></div><el-dialogv-model="dialogTableVisible"top="6vh":show-close="false"destroy-on-closev-if="dialogTableVisible"><el-inputv-model="input3"style="max-width: 600px"placeholder=""class="input-with-select"ref="input_dom"@keyup.enter="searchByWord"><template #prepend><el-select v-model="select" placeholder="搜索内容" style="width: 115px"><el-option label="卡片搜索" value="1" /><el-option label="内容搜索" value="2" /></el-select></template></el-input></el-dialog>
</template>
<script>
import { Search } from "@element-plus/icons-vue";
export default {data() {return {dialogTableVisible: false,select: "1",input3: null,};},components: {Search,},methods: {searchByWord() {this.$emit("ChangeSearch", {value: this.select,querySearch: this.input3,});this.dialogTableVisible = false;},openDialog() {this.dialogTableVisible = true;this.$nextTick(() => {this.$refs.input_dom.focus();});},},
};
</script>
<style lang="scss" scoped>
.search_box {display: flex;align-items: center;cursor: pointer;
}
</style>

核心代码:

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

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

相关文章

Docker仓库解析

目录 1、Docker仓库类型2、Docker仓库的作用3、工作原理4、管理与使用最佳实践 Docker仓库是Docker生态系统中的重要组成部分&#xff0c;它是用于存储和分发Docker镜像的集中化服务。无论是公共还是私有&#xff0c;仓库都是开发者之间共享和复用容器镜像的基础。 1、Docker仓…

2024年5月23号PMP每日三题含答案

2024年5月23号PMP每日三题含答案 1.项目可交付成果已移交给客户&#xff0c;项目经理现在必须收集项目参与者的反馈意见。项目经理应该查阅哪份文件来确定哪些人应该被包含进请求反馈意见的名单中&#xff1f; A.干系人登记册 B.沟通管理计划 C.经验教训 D.项目资源管理计划 1…

基于Java的推箱子游戏设计与实现(论文 + 源码)

【免费】关于基于JAVA的推箱子游戏.zip资源-CSDN文库https://download.csdn.net/download/JW_559/89325018 基于Java的推箱子游戏设计与实现 摘 要 社会在进步&#xff0c;人们生活质量也在日益提高。高强度的压力也接踵而来。社会中急需出现新的有效方式来缓解人们的压力。…

Centos7离线安装RabbitMQ教程

目录 安装包准备开始安装1. 创建目录2. 上传文件3. 安装erlang语言4. 安装socat5. 安装rabbitmq6. 启动、停止rabbitmq7. 设置开机启动8. 开启web界面管理工具9. 开启防火墙(root)10. 访问页面11. 附录 安装包准备 &#xff08;1&#xff09;准备RabbitMQ的安装包&#xff08;…

IT革命浪潮:技术革新如何改变我们的生活与工作

一、技术革新与行业应用 当前的IT行业正处于前所未有的技术革新阶段。其中&#xff0c;量子计算和虚拟现实是两项引人注目的技术。 量子计算&#xff1a;量子计算以其超越传统计算的潜力&#xff0c;正在逐步从理论走向实践。在材料科学、药物研发和气候模型等复杂计算领域&a…

本地搭建LLaMA-Factory环境进行大模型调优

LLaMA Factory LLaMA Factory快速对大模型进行快速调优&#xff0c;本文看一下如何本地搭建环境并调优&#xff0c;本文使用 ModelScope 社区中的模型&#xff0c;模型在国内&#xff0c;下载速度非常友好。 下载最新代码 ## LLaMA Factory官方 git pull https://github.com…

docker -JDK8安装

文章目录 前言docker -JDK8安装1. 新建一个 Docker 容器2. 在容器中安装和配置 JDK 8 前言 如果您觉得有用的话&#xff0c;记得给博主点个赞&#xff0c;评论&#xff0c;收藏一键三连啊&#xff0c;写作不易啊^ _ ^。   而且听说点赞的人每天的运气都不会太差&#xff0c;实…

spring cloud gateway一些相关概念

在云架构中运行着众多客户端和服务端&#xff0c;API网关的存在提供了保护和路由消息&#xff0c;隐藏服务&#xff0c;限制负载等等功能。下图是spring cloud gateway所处的位置。 它有三大概念&#xff1a; 路由&#xff1a;路由是构建网关的基本模块&#xff0c;它由ID&…

vue中的事件

vue中的事件是什么 绑定事件用v-on&#xff0c;简写v-on指令的参数是事件名&#xff08;原生或者自定义&#xff09;&#xff0c;值是事件处理器有原生事件&#xff08;click&#xff09;和自定义事件&#xff08;myEvent&#xff09;在组件上使用原生事件&#xff0c;需要加n…

worklist配置调试日志记录

工作记录用,不拘小节&#xff01; 设备请求日志 2024-05-23 09:03:14,503 [WorkListServer: 10.87.232.253 [18]] INFO - LISTMWL Request from [gehc]: (0008,0005) CS [ISO_IR 100] # 10 Specific Character Set 1-N (0008,0020) DA [] …

用python做的一个登录界面——浔川python社

以下代码是一个基于Tkinter的简单的登录注册界面。 代码的功能如下&#xff1a; 导入tkinter模块&#xff0c;并重命名为tk。 创建一个窗口对象window&#xff0c;并设置标题和大小。 创建一个随机的四位数作为验证码&#xff0c;并将其显示在窗口中。 创建用户名、密码和验…

如何搭建一个vue项目(完整步骤)

搭建一个新的vue项目 一、安装node环境二、搭建vue项目环境1、全局安装vue-cli2、进入你的项目目录&#xff0c;创建一个基于 webpack 模板的新项目3、进入项目&#xff1a;cd vue-demo&#xff0c;安装依赖4、npm run dev&#xff0c;启动项目 三、vue项目目录讲解四、开始我们…

go 爬虫之 colly 简单示例

1. 背景 colly 是 Go 实现的比较有名的一款爬虫框架&#xff0c;而且 Go 在高并发和分布式场景的优势也正是爬虫技术所需要的。它的主要特点是轻量、快速&#xff0c;设计非常优雅&#xff0c;并且分布式的支持也非常简单&#xff0c;易于扩展。 2. 官方文档 https://go-col…

RPC原理技术

RPC原理技术 背景介绍起源组件实现工作原理 背景 本文内容大多基于网上其他参考文章及资料整理后所得&#xff0c;并非原创&#xff0c;目的是为了需要时方便查看。 介绍 RPC&#xff0c;Remote Procedure Call&#xff0c;远程过程调用&#xff0c;允许像调用本地方法一样调…

Java 如何使用aws的kinesis实现消费端,消费流中数据

1.前言 AWS 官网给了两种方式实现: java 1.x java 2.x 这两种方式,包是不一样的,1.x是com.amazonaws,2是software.amazon.kinesis 使用也是天差地别,而且国内对kinesis这个资料简直少的可怜,这也就增加了开发难度, 2.什么是kinesis 我说一下kinesis是啥吧,其实和咱们队…

spring jpa 公共字段设计

数据库公共字段 1、多租户 tenantId 2、创建者名字 createName 3、创建者时间 createTime 4、更新者名字 updateName 5、更新者时间 updateTime 基础model类 /*** 基础Model*/ Data MappedSuperclass public class BaseModel implements Serializable{IdGeneratedValue(stra…

Linux DAY 6 _systemctl

systemctl命令&#xff0c;通过这个命令控制系统操作 语法&#xff1a;systemctl start | stop | status | enable | disable 服务名 start 启动 stop 关闭 status 查看状态 enable 开启开机自启 disable 关闭开机自启 服务名&#xff1a; NetworkManager 主网络服务 net…

源网络地址转换SNAT

左上角的是访问互联网发送的数据包&#xff0c;第一个是访问&#xff0c;第二个是网页传回来的 3、4项是源端口号和目的端口号&#xff08;3是随机的&#xff08;1024-65535&#xff09;&#xff0c;那个是http的网页服务端口就是80&#xff09; 那么往回传数据的时候源和目的…

解决uniapp中的web-view页面进入时全屏问题

当我们在使用uniapp开发应用的时候&#xff0c;我们使用web-view进行外部页面的引入 在h5 浏览器下显示正常&#xff0c;我通过样式控制&#xff0c;上面是web-view&#xff0c;下面是菜单栏。 但是在 app调试或真机上&#xff0c;无论如何&#xff0c;web-view都占满全屏&…

0.零基础入门微服务实战课

0.零基础入门微服务实战课 1.微服务和 Spring Cloud1.1 什么是微服务&#xff1f;1.2 什么是 Spring Cloud&#xff1f;1.3 微服务 VS Spring Cloud 2.为什么要学微服务&#xff1f;3.Spring Cloud 组件介绍 1.微服务和 Spring Cloud 1.1 什么是微服务&#xff1f; 微服务是将…