Vue のキャリッジ リターンにより入力ボックスが追加され、カーソルが下に移動します

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]))
},

おすすめ

転載: blog.csdn.net/Selina_lxh/article/details/129007991