vue carriage return トリガー focus @keyup.enter.native
enter カーソルが下に移動すると、本質的には、現在の入力がフォーカスから外れ、次の入力がフォーカスされるということです。
可以使用给定ref值的方法
<el-form-item label="常见问题">
<div v-for="(item,idx) in basicSettingForm.commonProblemList" :key="idx" class="commonQuestion" >
<!-- 点击enter新增且光标下移 -->
<el-input :ref="`idx-${idx}`" v-model="basicSettingForm.commonProblemList[idx]" placeholder="请输入问题" style="width:60%;" size="mini" @keyup.enter.native="addTabQuestion($event,idx)"></el-input>
<i v-if="idx===basicSettingForm.commonProblemList.length-1" class="el-icon-circle-plus-outline" style="font-size:20px" @click="addQuestion(2)"></i>
<i class="el-icon-top" style="font-size:20px" @click="moveUpQuestion(idx)"></i>
<i v-if="idx!==0" class="el-icon-delete-solid" style="font-size:20px" @click="delQuestion(idx)"></i>
</div>
</el-form-item>
// 增加输入框并且光标下移
addTabQuestion (event, idx) {
this.addQuestion(1, event, idx)
},
// 增加常见问题
addQuestion (flag, event, idx) {
const that = this
this.basicSettingForm.commonProblemList.push('')
if (flag === 1) {
this.$nextTick(() => {
event.target.blur()//当前元素失焦
that.$refs[`idx-${
idx + 1}`][0].focus()//下一个元素聚焦,重点在于$refs[`AA`]后面一个要加[0],否则拿不到下一个元素
})
}
},
// 上移当前常见问题
moveUpQuestion (idx) {
const arr = this.basicSettingForm.commonProblemList
arr.splice(idx - 1, 1, ...arr.splice(idx, 1, arr[idx - 1]))
},