vue input自动跳转下一个框

第一种基于vue实现

<template>
  <div class="coordinate-container">
    <span class="coord-item">
      <span>N</span>
      <input v-model.trim="coordinateArr.lat.degree"
             @keyup.enter="onClickSearch"
             ref="input1"
             @keyup="nextFocus(1)"
             :maxlength="2" :disabled="btnStatus">
      <span>°</span>
      <input v-model.trim="coordinateArr.lat.minute"
             @keyup.enter="onClickSearch"
             ref="input2"
             @keyup="nextFocus(2)"
             :maxlength="2" :disabled="btnStatus">
      <span>′</span>
      <input v-model.trim="coordinateArr.lat.sec"
             @keyup.enter="onClickSearch"
             ref="input3"
             @keyup="nextFocus(3)"
             :maxlength="2" :disabled="btnStatus">
      <span>″</span>
    </span>
    <span class="coord-item">
      <span>E</span>
      <input v-model.trim="coordinateArr.lng.degree" class="long-item"
             @keyup.enter="onClickSearch"
             ref="input4"
             @keyup="nextFocus(4)"
             :maxlength="3" :disabled="btnStatus">
      <span>°</span>
      <input v-model.trim="coordinateArr.lng.minute"
             @keyup.enter="onClickSearch"
             ref="input5"
             @keyup="nextFocus(5)"
             :maxlength="2" :disabled="btnStatus">
      <span>′</span>
      <input v-model.trim="coordinateArr.lng.sec"
             @keyup.enter="onClickSearch"
             ref="input6"
             @keyup="nextFocus(6)"
             :maxlength="2" :disabled="btnStatus">
      <span>″</span>
    </span>
    <span class="icon-item" @click="onClickClearPoint">
      <span class="el-icon-close" v-show="showIcon"></span>
    </span>
    <span class="el-icon-search item-search" @click="onClickSearch"></span>
  </div>
</template