自定义 Enter 键组件之间切换光标，光标顺序可维护（存在数组内）

一、功能需求描述 

enter键实现在input输入框光标切换，每一个输入框都是组件，输入框输入的内容接口请求输入的内容不存在时，光标保留原位置（不切换）， 

二、实现步骤

        1. 页面是用的element UI 插件完成的，在我们如需要切换的输入框（自定义组件）上上面，定义 ref 和 name ，注：两个的值要相同，在下面切换的时候会用到， 注意子组件传过来的值，这个是关键，它是要判断接口是否请求到了东西

<el-col :span="24" style="display: flex; align-items: center">
      <span class="demonstration">仕入先</span>
      <supplier-reference ref="startSupplierNoDTO" name="startSupplierNoDTO" @changeFather="getStartSupplier"/>&nbsp;-
      <supplier-reference ref="endSupplierNoDTO" name="endSupplierNoDTO" @changeFather="getEndSupplier" />
</el-col>

<el-col :span="24" style="display: flex;align-items: center;">
      <span>請求先</span>
      <order-reference ref="warehouseDto" name="warehouseDto" @getSourceWarehouseData="getStartOrder" />&nbsp;-
      <order-reference ref="endWarehouseDto" name="endWarehouseDto" @getSourceWarehouseData="getEndOrder" />
 </el-col>

        2. 自定义组件内，注意组件内暴露出来的输入框上面的方法和属性， :name = "name"  值是从父组件上面拿到的。data里面定义一下name

<el-input v-model="outGuideCode" :name="name" placeholder="仕入先番号号入れてください"  @blur="submit($event)"@keyup.enter.native="submit($event)" />

        3.自定义组件，data  内需要定义的

data() {
    return {
      comeOut: true, // 接口请求是否成功
      name: '' // 父元素，name 值
    }
  },

        4. 自定义组件内，在 mounted 属性内，页面初始化加载时 获取到父元素上面的属性，这里用  $arrts  可以拿到父元素上面定义的属性

mounted() {
    // l父元素 name 属性
    this.name = this.$attrs.name
  },

        5. 自定义组件内，submit( ) 方法，注：关键是 this.comeOut 的值，为 true 时 允许光标切换，反之不能不能切换, 
                                        最为关键重要的就是 $emit 传给父组件的值

submit(ev) {
      this.outSupplierName = ''
      this.supplierId = ''
      if (!this.outSupplierCode) {
        this.supplierData = {
          supplierCode: '',
          supplierId: '',
          supplierName: ''
        }
        // 当输入框内没有输入任何内容时，传给父组件 this.comeOut 的状态
        this.comeOut = true
        this.$emit('changeFather', this.supplierData, this.comeOut, ev, this.outSupplierCode)
        return
      }
      const supplierCode = this.outSupplierCode
      getSupplierInfoByCode(supplierCode).then(res => {
        if (res.data.data.length !== 0) {
          this.outSupplierName = res.data.data[0].supplierName
          this.supplierId = res.data.data[0].id
        // 当接口请求成功时，传给父组件 this.comeOut 的状态
          this.comeOut = true
        } else {
          this.outSupplierName = ''
          this.supplierId = ''
          // 接口请求失败/未请求到内容
          this.comeOut = false
          this.$message.error('仕入先存在しません')
        }
        var data = {
          supplierId: this.supplierId,
          supplierName: this.outSupplierName,
          supplierCode: this.outSupplierCode
        }
        this.$emit('changeFather', data, this.comeOut, ev)
      })
    }

        6. 父组件页面， 定义 focusChange () 方法，enter 切换的核心内容

// l enter 切换事件
    focusChange(event) {
      const linkMap = new Map()
      linkMap.set('startGuideReference', 0)
      linkMap.set('endGuideReference', 1)
      const linkArr = Array.from(linkMap.keys())
      const key = event.target.name || event.currentTarget.getAttribute('name')
      let currentTarget = linkMap.get(key)
      currentTarget++
      let name = ''
      for (const item of linkMap) {
        if (item[1] === currentTarget) {
          name = item[0]
        }
      }
      if (event.keyCode === 13) {
        if (!name) {
          name = linkArr[0]
        }
        $($(this.$refs[name].$el).find('input')[0]).focus()
        if (currentTarget === linkArr.length - 1) {
          currentTarget = 0
        }
      }
    }

        7. 父组件页面， 父组件获取子组件的方法内调用 focusChange ()方法  @changeFather="getStartSupplier"  , 每一个组件都是同理

getStartSupplier(comeOut, event) {
    // l 判断是否请求成功，实现光标切换
    if (comeOut) {
      if (event !== undefined) {
        this.focusChange(event)
      }
    }
},

三、方法可以了灵活使用， 在有循环插入 ref 和 name 的地方，在focusChange 方法内 ，用 for 循环插入 
        新增一行切换，focusChange 方法可以用到 async await 异步
        方法不是唯一的，写到光标切换，我也百度了很多简单的方法，但是不利于后期维护，当时就想到了写一个数组，虽然刚开始有点麻烦难理解，但是复用性还是挺强的