vue3+element-plus el-input 自动获取焦点

        虽然element有提供input的autofocus属性,但是当我们第二次进入页面就会发现autofocus已经不再生效,需要通过onMounted去触发input的focus解决这个问题。

1.先给el-input绑定一个ref:
<el-input ref="inputRef"  v-model="inpValue" clearable />

2.定义一个函数去触发这个input的focus:
const focusInput = () => {
        nextTick(() => {
                inputRef.value.focus()
        })
}

3.最后通过onMounted去触发这个函数:
onMounted(() => {
        focusInput()
})

整体代码就是:

<template><div class="use_wrap"><div class="content"><el-input ref="inputRef" v-model="inputValue" placeholder="请输入" clearable /></div></div>
</template><script lang="ts" setup>
import { ref, onMounted, nextTick } from 'vue'
const inputRef = ref()
const inputValue = ref('')
onMounted(() => { focusInput() })
const focusInput = () => {nextTick(() => {inputRef.value.focus()})
}
</script>

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

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

相关文章

景联文科技:专业提供高质量大语言模型训练数据

2024年&#xff0c;数字经济被再次写入政府工作报告中&#xff0c;报告指出要深化大数据、人工智能等研发应用&#xff0c;打造具有国际竞争力的数字产业集群。 大模型作为生成式人工智能的基础&#xff0c;日益成为国际科技竞争的焦点。人大代表杨剑宇指出&#xff0c;尽管我国…

008-slot插槽

slot插槽 1、插槽 slot 的简单使用2、插槽分类2.1 默认插槽2.2 具名插槽2.3 作用域插槽 插槽就是子组件中的提供给父组件使用的一个占位符&#xff0c;用<slot></slot> 表示&#xff0c;父组件可以在这个占位符中填充任何模板代码&#xff0c;如 HTML、组件等&…

老阳分享:视频号带货的四大技巧

视频号带货作为新兴的电商模式&#xff0c;在微信这个庞大的社交平台上展现出了巨大的潜力。要想在视频号带货领域取得成功&#xff0c;需要掌握一定的技巧。本文将为您详细解析视频号带货的四大技巧&#xff0c;感兴趣的朋友一起去看看吧。 一、内容创新 内容创新是视频号带货…

【深度学习笔记】5_11 残差网络ResNet

注&#xff1a;本文为《动手学深度学习》开源内容&#xff0c;部分标注了个人理解&#xff0c;仅为个人学习记录&#xff0c;无抄袭搬运意图 5.11 残差网络&#xff08;ResNet&#xff09; 让我们先思考一个问题&#xff1a;对神经网络模型添加新的层&#xff0c;充分训练后的…

Express框架的产生

Express框架的产生&#xff0c;解决的痛点是什么&#xff1f; 1.优化Node.js在Web的开发 Express框架是一个基于Node.js的Web应用程序开发框架&#xff0c;它的产生主要是为了解决Node.js在Web开发中的一些痛点。 在Node.js出现之前&#xff0c;Web开发主要是基于传统的后端…

springboot项目集成,项目流程概述

一、项目介绍 二、项目设计原则 2.1整体原则 2.2持久层 2.3业务逻辑层 具体分析 三、实战 3.1项目搭建 <dependency><groupId>org.springframework.security</groupId><artifactId>spring-security-crypto</artifactId></dependency>&l…

双链表的实现(数据结构)

链表总体可以分为三大类 一、无头和有头 二、单向和双向 三、循环和不循环 从上面分类得知可以组合成8种不同类型链表&#xff0c;其中单链表最为简单&#xff0c;双联表最为复杂&#xff0c;两种链表都实现后其余链表都不成问题。 我们前期博客已将完成了单向无头不循环链表…

基于PHP的景点数据分析系统设计与实现

目 录 摘 要 I Abstract II 引 言 1 1 关键理论与技术 3 1.1 框架技术 3 1.1.1 QueryList 3 1.1.2 ThinkPHP 3 1.1.3 Amaze UI 3 1.2 数据可视化技术 4 1.3 数据库技术 4 1.4 本章小结 4 2 需求分析 5 2.1 业务流程分析 5 2.2 功能需求分析 5 2.3 用例分析 7 2.4 非功能性需求…

it-tools工具箱

it-tools 是一个在线工具集合&#xff0c;包含各种实用的开发工具、网络工具、图片视频工具、数学工具等 github地址&#xff1a;https://github.com/CorentinTh/it-tools 部署 docker run -d --name it-tools --restart unless-stopped -p 8080:80 corentinth/it-tools:lat…

gradle 相关

aar 不加 aar 以及 transitive true library可以通过多种格式上传到远程仓库&#xff0c;比如大部分情况下用到的.jar或.aar。当没有指定后缀的话&#xff0c;依赖的时候将会下载它的默认格式&#xff08;由上传方定义&#xff0c;如果没有定义则默认为.jar&#xff09;的Lib…

yolov8多batch推理,nms后处理

0. 背景 在高速公路监控视频场景下&#xff0c;图像分辨率大都是1920 * 1080或者2560 * 1440&#xff0c;远处的物体&#xff08;车辆和行人等&#xff09;都比较小。考虑需要对图像进行拆分&#xff0c;然后把拆分后的数据统一送入模型中&#xff0c;推理的结果然后再做nms&am…

redis centos7 单点搭建

redis centos 安装步骤 下载源文件编译Redis拷贝编译后文件修改配置文件启动redis 下载源文件 wget https://download.redis.io/redis-stable.tar.gz编译Redis tar -xzvf redis-stable.tar.gz cd redis-stable make如果编译成功&#xff0c;你会在src目录中找到几个 Redis 二…

Android Selinux详解[一]---整体介绍

Android 使用安全增强型 Linux (SELinux) 对所有进程强制执行强制访问控制 (MAC)&#xff0c;甚至包括以 Root/超级用户权限运行的进程&#xff08;Linux 功能&#xff09;。 借助 SELinux&#xff0c;Android 可以更好地保护和限制系统服务、控制对应用数据和系统日志的访问、…

【微前端乾坤】 vue2主应用、vue2+webpack子应用,vue3+webpack子应用、vue3+vite子应用的配置

因公司需求 需要将原本vue2iframe 形式的项目改成微前端乾坤的方式。 之前iframe都是直接嵌套到vue2项目的二级目录或者三级目录下的(反正就是要随处可嵌) 用乾坤的原因&#xff1a; 1、iframe嵌套的方式存在安全隐患&#xff1b; 2、项目是联合开发的&#xff0c; 乾坤的方便…

Doris画像存储实践系列二

上一篇: Doris画像存储系列一(https://editor.csdn.net/md/?articleId120416295) 六、画像宽表bitmap倒排表 重复一下bitmap倒排表的优点和缺点 标签类型标签值user_ids性别男1,2性别发3 优点: doris bitmap聚合表在对做用户画像群体计算时很友好,交集/并集/差集因为数据…

SQL23 统计每个学校各难度的用户平均刷题数

题解 | #统计每个学校各难度的用户平均刷题数# 题意明确&#xff1a; 计算每个学校用户不同难度下的用户平均答题题目数 问题分解&#xff1a; 限定条件&#xff1a;无&#xff1b;每个学校&#xff1a;按学校分组group by university不同难度&#xff1a;按难度分组group b…

Hack The Box-Crafty

目录 信息收集 rustscan whatweb WEB 漏洞利用 漏洞说明 漏洞验证 提权 get user.txt get Administrator 总结 信息收集 rustscan ┌──(root㉿ru)-[~/kali/hackthebox] └─# rustscan -a 10.10.11.249 --range0-65535 --ulimit5000 -- -A -sC [~] Automatically…

NLP:自定义模型训练

书接上文&#xff0c;为了完成指定的任务&#xff0c;我们需要额外训练一个特定场景的模型 这里主要参考了这篇博客&#xff1a;大佬的博客 我这里就主要讲一下我根据这位大佬的博客一步一步写下时&#xff0c;遇到的问题&#xff1a; 文中的cfg在哪里下载&#xff1f; 要不…

Fastjson漏洞利用合集

0x01 Fastjson 概述 1.应用场景 接口返回数据 Ajax异步访问数据RPC远程调用前后端分离后端返回的数据开放API(一些公司开放接口的时候&#xff0c;我们点击请求&#xff0c;返回的数据是JSON格式的)企业间合作接口(数据对接的时候定义的一种规范&#xff0c;确定入参&#x…

BUUCTF-MISC-[HDCTF2019]信号分析1

题目链接&#xff1a;BUUCTF在线评测 (buuoj.cn) 下载附件是一个WAV的文件&#xff0c;题目又叫做信号分析&#xff0c;用Adobe Audition 打开分析了 发现有很多长短不一样的信号&#xff0c;只需要分析一段 猜测长的是一短的为0 最后得到0101010101010101000000110 百度得知…