前言
当打开一个表单,要聚焦输入框,用vue如何实现
知识点
- 首先想到聚焦的事件focus();
- 调用事件得先获取元素,
this.$refs.iptTerminal[param]
; - 组件打开时获取元素,在
$nextTick
中,防止获取不到;
基本用法
<template>
<el-input ref="ipt"></el-input>
</template>
<script>
this.$nextTick(()=>{
this.$refs.ipt.focus();
});
</script>
v-for时聚焦
背景:当输入框是v-for渲染时,如何获取DOM元素并聚焦
思路:
- 给每个输入框(el-input)相同的ref值
- 获取vue元素时通过数组获取
<template>
<el-input v-for="(item,index) in arr" ref="ipt"></el-input>
</template>
<script>
this.$nextTick(()=>{
// 假设,我想聚焦第三个输入框
this.$refs.ipt[3].focus();
});
</script>