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脚手架下载和配置，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-04-04
VUE3自定义指令防止重复点击多次提交的实现方法
vue3项目,新增弹框连续点击确定按钮防止多次提交,在按钮上添加自定义指令,这篇文章主要介绍了VUE3自定义指令防止重复点击多次提交的实现方法,需要的朋友可以参考下
2024-08-08
一文彻底教会你在vue中写jsx
以前我们经常在react中使用jsx,现在我们在vue中也是用jsx,下面这篇文章主要给大家介绍了关于在vue中写jsx的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2023-06-06
vuejs路由的传参及路由props配置详解
最近在学习vue router的传参,所以下面这篇文章主要给大家介绍了关于vuejs路由的传参及路由props配置的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-07-07
前端开发指南之vue-grid-layout的使用实例
vue-grid-layout是一个vue栅格拖动布局的组件,下面这篇文章主要给大家介绍了关于前端开发指南之vue-grid-layout使用的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-09-09
解决微信浏览器缓存站点入口文件(IIS部署Vue项目)
这篇文章主要介绍了解决微信浏览器缓存站点入口文件(IIS部署Vue项目),本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
2019-06-06
Vue.js实现列表清单的操作方法
Vue.js在设计上采用MVVM模式，当View视图层发生变化时，会自动更新到ViewModel.接下来通过本文给大家分享Vue.js实现列表清单的操作方法，需要的朋友参考下吧
2017-11-11
vue选择下拉框动态变化表单方式
这篇文章主要介绍了vue选择下拉框动态变化表单方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-08-08
nuxt 每个页面head标签内容设置方式
这篇文章主要介绍了nuxt 每个页面head标签内容设置方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-11-11
浅析vue中常见循环遍历指令的使用 v-for
这篇文章主要介绍了vue中常见循环遍历指令的使用 v-for，包括v-for遍历数组，v-for遍历json对象,本文给大家介绍的非常详细，需要的朋友可以参考下
2018-04-04