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>

相关推荐

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

    2024-03-11 17:40:04       20 阅读
  2. vue3+ts 获取input 输入框中的值

    2024-03-11 17:40:04       11 阅读
  3. vue封装全局获取焦点指令

    2024-03-11 17:40:04       42 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-03-11 17:40:04       19 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-03-11 17:40:04       19 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-03-11 17:40:04       20 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-03-11 17:40:04       20 阅读

热门阅读

  1. vue,Promise备忘

    2024-03-11 17:40:04       21 阅读
  2. 大数据组件之Sqoop

    2024-03-11 17:40:04       19 阅读
  3. Sqoop 学习

    2024-03-11 17:40:04       26 阅读
  4. jQuery改变元素的方法

    2024-03-11 17:40:04       21 阅读
  5. Linux(CentOS7.5):通过docker安装mysql8.0

    2024-03-11 17:40:04       18 阅读
  6. cudnn下载国内满速下载地址长期有效更新

    2024-03-11 17:40:04       18 阅读
  7. Redis info - 内存

    2024-03-11 17:40:04       18 阅读
  8. Apache拦截不安全漏洞

    2024-03-11 17:40:04       20 阅读
  9. python基础练习 序列求和

    2024-03-11 17:40:04       20 阅读
  10. 阿尔巴尼亚借助ChatGPT加快欧盟入会进程

    2024-03-11 17:40:04       22 阅读
  11. 3.最长连续序列

    2024-03-11 17:40:04       18 阅读
  12. _note_01

    2024-03-11 17:40:04       17 阅读