您的位置 首页 焦点资讯

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模式自动获取焦点,这个焦点是写了一个指令,这样子能间接实现,不推荐,耗费性能还麻烦,不过,如果刚渲染的时候想要自动获取焦点的时候就用指令很方便了。

原文链接:https://blog.csdn.net/qq_33242126/article/details/123929054?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522166580747916782417095127%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=166580747916782417095127&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~times_rank-3-123929054-null-null.nonecase&utm_term=%E7%84%A6%E7%82%B9

热门文章