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()
})

整体代码就是:

html 复制代码
<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>
相关推荐
GISer_Jing2 分钟前
不定高虚拟列表性能优化全解析
前端·javascript·性能优化
Predestination王瀞潞16 分钟前
WEB前端技术基础(第三章:css-网页美化的衣装-上)
前端·css
鹏多多20 分钟前
深度解析React中useEffect钩子的使用
前端·javascript·react.js
超级大只老咪21 分钟前
CSS基础语法
前端
冰暮流星22 分钟前
css之box-sizing属性
前端·javascript·css
倚肆25 分钟前
CSS ::before 和 ::after 伪元素详解
前端·css
华洛28 分钟前
聊一下如何稳定的控制大模型的输出格式
前端·产品经理·ai编程
你听得到1133 分钟前
卷不动了?我写了一个 Flutter 全链路监控 SDK,从卡顿、崩溃到性能,一次性搞定!
前端·flutter·性能优化
IT_陈寒36 分钟前
Python 3.12震撼发布:5大性能优化让你的代码提速50%,第3点太香了!
前端·人工智能·后端
恋猫de小郭1 小时前
今年各大厂都在跟进的智能眼镜是什么?为什么它突然就成为热点之一?它是否是机会?
android·前端·人工智能