Vue（ts） - ref $refs 之el-input获取焦点

场景：

如下图，目录页次号是由3个字段拼接而成，每个字段限制输入长度三个,就自动跳转下一个input框；

方法一：

#html:

  <yo-cell label="目录页次号:"><!--目录编号--><el-input v-model="formData.katCode" maxlength="3" @input="goNextInput('inputCG',formData.katCode)" size="mini"></el-input>- <!--页次号--><el-input ref="inputCG" v-model="formData.catalogGroup" maxlength="3" @input="goNextInput('inputCN',formData.catalogGroup)" size="mini"></el-input>- <!--页次序号--><el-input ref="inputCN" v-model="formData.catalogNo" maxlength="3" size="mini"></el-input></yo-cell>

#vue(ts)

<script lang="ts">
import Vue from 'vue';
import { Component } from "vue-property-decorator";
@Component({})
export default class extends Vue{$refs:any;goNextInput(ref:any,val:string){if(val&&val.length == 3){this.$nextTick(() => {this.$refs[ref].focus();})}};
------------------------------------------------//可以不整个声明，下面这样写也行(this.$refs as any)[ref].focus();------------------------------------------------$refs: {inputGG: HTMLElement;inputCN: HTMLElement;}这样声明的话，不能使用变量，只能直接调具体的值eg.this.$refs.inputGG.focus();
}

我想要全局声明的，发现不行，不起作用还是会报错，（如果知道，麻烦告知一下，感激不尽 T_T）如下：咋写呢头秃。。。

方法二：

这个就麻烦了，我这种场景就不应该用这个，不过还是要记录一下

思路：第二个和第三个input框先写个假的。

第一个input输入内容长度为3时，第二个input会变成else模式自动获取焦点，这个焦点是写了一个指令，这样子能间接实现，不推荐，耗费性能还麻烦，不过，如果刚渲染的时候想要自动获取焦点的时候就用指令很方便了。

Vue（ts） - ref $refs 之el-input获取焦点相关推荐

Vue 自定义指令解决IOS webview input 获取焦点被键盘遮挡
Vue 自定义指令解决IOS webview input 获取焦点被键盘遮挡创建自定义指令在使用input的地方添加自定义指令,记录一下还有优化空间. vue 文件 <div id=&qu ...
input获取焦点vue_在Vue中输入框自动获取焦点的三种方式
原生JS操作DOM 使用mounted钩子函数,它表示页面一加载进来就执行函数里面的内容(和window.onload类似) 1 //html部分编号: //vue对象 var vm = new V ...
VUE中$refs和$el的使用
ref: 给元素或者子组件注册引用信息 ref有三种用法: 1.ref加在普通元素上,获取用this.$ref.xxx可以获取到dom元素. <div ref="system" ...
VUE中$refs和$el的使用详解
ref: 给元素或者子组件注册引用信息 ref有三种用法: 1.ref加在普通元素上,获取用this.$ref.xxx可以获取到dom元素. <div ref="system" ...
input 获取焦点的情况
第一种 <input class="ModifyInput" ref="test" v-model="valueEdit" /> ...
创建Vue+TS+Ant Design of Vue 项目
创建Vue+TS+Ant Design of Vue 项目创建项目选择配置运行项目安装 ant-design-vue 安装 babel-plugin-import 使用VS Code打开配置 ...
Vue -Ts入门 (一)
本文章,是个人第一次尝试利用vue-cli3(事实更新vue-cli4),从头开始,加入typeScript.如果有出处,欢迎指正.共同成长. 本文是做vue+ts;不会对原vue做过多的说明,如果有 ...
input获取焦点vue_Vue点击显示文本框并获取焦点
Vue中除了核心功能默认内置的指令(v-model和v-show),Vue也允许注册自定义指令.//注册一个全局自定义指令v-focus Vue.directive('focus', { //当被绑定 ...
vue+ts在线文档编辑(类腾讯文档)多人在线编辑-自定义页眉和分页打印（三）
目录前言一.自定义页眉内容二.分页文档打印 1.加入分页符 2.打印方法 3.打印模块完整代码总结前言随着在线办公场景越来越多,同时需要各式各样办公软件,在开发时就用得到在线文档来内容指定 ...
iOS下Html页面中input获取焦点弹出键盘时挡住input解决方案
iOS下Html页面中input获取焦点弹出键盘时挡住input解决方案参考文章: (1)iOS下Html页面中input获取焦点弹出键盘时挡住input解决方案 (2)https://www.cn ...

Vue（ts） - ref $refs 之el-input获取焦点

方法一：

方法二：

Vue（ts） - ref $refs 之el-input获取焦点相关推荐

最新文章

热门文章