vue之输入框聚焦

前言

当打开一个表单，要聚焦输入框，用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元素并聚焦

思路：

1. 给每个输入框（el-input）相同的ref值
2. 获取vue元素时通过数组获取

<template>
<el-input v-for="(item,index) in arr" ref="ipt"></el-input>
</template>
<script>
this.$nextTick(()=>{
	// 假设，我想聚焦第三个输入框
	this.$refs.ipt[3].focus();
});
</script>