当前位置: 首页 > news >正文

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>

相关文章:

  • 北京网站建设多少钱?
  • 辽宁网页制作哪家好_网站建设
  • 高端品牌网站建设_汉中网站制作
  • 动态规划 Leetcode 746 使用最小花费爬楼梯
  • SSD LDPC软错误探测方案解读
  • C语言分析基础排序算法——交换排序
  • 仓库管理中三防手持终端应用的小知识!
  • ElasticSearch为什么快?
  • Linux:kubernetes(k8s)探针LivenessProbe的使用(9)
  • JavaEE进阶(14)Linux基本使用和程序部署(博客系统部署)
  • 【解决】虚幻导入FBX模型不是一个整体
  • java上传本地文件到服务器共享
  • LeetCode_25_困难_K个一组翻转链表
  • 开源计算机视觉库OpenCV详解
  • 《自私的基因》读书笔记
  • 初级代码游戏的专栏介绍与文章目录
  • 代码随想录算法训练营day53|第九章 动态规划part14
  • 关于springboot一个接口请求后,主动取消后,后端是否还在跑
  • 【从零开始安装kubernetes-1.7.3】2.flannel、docker以及Harbor的配置以及作用
  • 11111111
  • C学习-枚举(九)
  • gf框架之分页模块(五) - 自定义分页
  • HTML-表单
  • iOS 系统授权开发
  • Java 网络编程(2):UDP 的使用
  • k8s如何管理Pod
  • ucore操作系统实验笔记 - 重新理解中断
  • 给第三方使用接口的 URL 签名实现
  • 基于组件的设计工作流与界面抽象
  • 深度解析利用ES6进行Promise封装总结
  • 微信小程序填坑清单
  • 小程序、APP Store 需要的 SSL 证书是个什么东西?
  • # AI产品经理的自我修养:既懂用户,更懂技术!
  • #mysql 8.0 踩坑日记
  • #使用清华镜像源 安装/更新 指定版本tensorflow
  • (10)Linux冯诺依曼结构操作系统的再次理解
  • (C++哈希表01)
  • (C语言)深入理解指针2之野指针与传值与传址与assert断言
  • (ISPRS,2023)深度语义-视觉对齐用于zero-shot遥感图像场景分类
  • (转)项目管理杂谈-我所期望的新人
  • (状压dp)uva 10817 Headmaster's Headache
  • *(长期更新)软考网络工程师学习笔记——Section 22 无线局域网
  • . NET自动找可写目录
  • .net 8 发布了,试下微软最近强推的MAUI
  • .net core使用RPC方式进行高效的HTTP服务访问
  • .Net的C#语言取月份数值对应的MonthName值
  • .NET框架类在ASP.NET中的使用(2) ——QA
  • .NET轻量级ORM组件Dapper葵花宝典
  • .net中调用windows performance记录性能信息
  • /etc/motd and /etc/issue
  • @JSONField或@JsonProperty注解使用
  • @PreAuthorize与@Secured注解的区别是什么?
  • @ResponseBody
  • @在php中起什么作用?
  • [ C++ ] STL---stack与queue
  • [ element-ui:table ] 设置table中某些行数据禁止被选中,通过selectable 定义方法解决
  • [ Linux 长征路第二篇] 基本指令head,tail,date,cal,find,grep,zip,tar,bc,unname
  • [Android]如何调试Native memory crash issue