vue Antd 输入框Input自动聚焦方式

更新时间：2023年04月21日 09:37:22 作者：什么小蛋挞**

这篇文章主要介绍了vue Antd 输入框Input自动聚焦方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

vue Antd 输入框Input自动聚焦

1、从vue的实例属性$ref去调input的focus方法使其实现聚焦。

<a-input type="text ref="ainput" /> 
<button @click="handleChange"></button>

2、点击button自动聚焦，或其他事件需要聚焦

methods:{
    handleChange(){
        this.$nextTick(()=>{
            this.$refs.ainput.focus()
        })
    }
}

vue中输入框聚焦，自动跳转下一个输入框

需求

点击请扫描库位，enter键触发后，跳转到下一输入框，然后自动聚焦另外一个输入框上

在这里插入图片描述

 <el-input
        v-model="posName"  clearable size="small" placeholder="请扫描库位" style="width: 200px"
        class="filter-item"  @keyup.enter.native="jumpInput"
      />
  <el-input
        ref="barcodeMsg" v-model="barcode" clearable size="small"  placeholder="请扫描物料信息"
        style="width: 400px"  class="filter-item" @keyup.enter.native="getSearch('material')"
      />

 // enter键触发
    jumpInput() {
      this.$refs.barcodeMsg.focus(); // 自动获取焦点
    },

如图

在这里插入图片描述

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

详解vue如何使用自定义指令
在Vue的模板语法中,我们学了很多指令,当然除了这些指令,Vue也允许我们自己定义自己的指令,所以本文就来和大家聊聊如何使用自定义指令吧
2023-10-10
vue3+高德地图只展示指定市、区行政区域的地图以及遮罩反向镂空其他地区
vue大屏项目开发,客户觉得地图上的文字标注太多了,要求地图上只显示省市等主要城市的标注,这篇文章主要给大家介绍了关于vue3+高德地图只展示指定市、区行政区域的地图以及遮罩反向镂空其他地区的相关资料,需要的朋友可以参考下
2024-02-02
Vue3实现动态导入Excel表格数据的方法详解
在开发工作过程中，我们会遇到各种各样的表格数据导入，动态数据导入可以减少人为操作，减少出错。本文为大家介绍了Vue3实现动态导入Excel表格数据的方法，需要的可以参考一下
2022-11-11
axios 封装上传文件的请求方法
今天小编就为大家分享一篇axios 封装上传文件的请求方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-09-09
vue3.0 CLI - 2.2 - 组件 home.vue 的初步改造
这篇文章主要介绍了vue3.0 CLI - 2.2 - 组件 home.vue 的初步改造,home.vue 组件有了两个属性：navs 和 tts 属性，具体实例代码大家跟随小编一起通过本文学习吧
2018-09-09
Vue 中axios配置实例详解
本文通过实例代码给大家介绍了Vue axios配置,非常不错，代码简单易懂，具有一定的参考借鉴价值，需要的朋友可以参考下
2018-07-07
为什么vue中不建议使用空字符串作为className
本文主要介绍了为什么vue中不建议使用空字符串作为className，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-09-09
分享12个Vue开发中的性能优化小技巧(实用!)
一般来说,你不需要太关心vue的运行时性能,它在运行时非常快,但付出的代价是初始化时相对较慢,下面这篇文章主要给大家分享介绍了十二个Vue开发中的性能优化小技巧,需要的朋友可以参考下
2022-02-02
vuex新手进阶篇之取值
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式,下面这篇文章主要给大家介绍了关于vuex新手进阶篇之取值的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-10-10
vue+elementUI显示表格指定列合计数据方式
这篇文章主要介绍了vue+elementUI显示表格指定列合计数据方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-10-10