有关input框在vue中无论如何都可以获取到焦点

一、需求

扫码枪键入数据

二、分析

因扫描枪本质上其实就是键盘键入数据，最简单的方法就是写一个input框并使其获取到焦点，直接扫码后键入数据即可

在测试中这个input框可以显示，调用该组件时手动点击获取焦点即可，但是上线后这个输入框时要定位到屏幕外的就算是可以显示在屏幕中肯定不能要求用户去点击，故而若能找到一个方法可以在调用时就使其获取到焦点，不就可以解决了嘛

给当前input框绑定ref亦或者是绑定Id值，而后

 this.$refs.inputref.focus()
 // 或者
 document.getElementById("inputId").focus()

使用以上这个方法并在组件初始化时加载时就调用看似解决了，但是若此时用户手点击了其他地方的话，此时又会失去焦点。
解决方法一：当其失去焦点时再将其获取焦点可解决
解决方法二：将得焦事件绑定到document中这样的话无论点击什么地方都会执行input获取焦点事件

三、解决

<input type="text" v-model="inputValue" ref="inputref" placeholder="请输入内容" id="inputId" @keydown.enter="enter" @blur="blurInput" class="el-input">

方法一：当其失去焦点时再将其获取焦点可解决

  mounted() {
  	// 组件初始加载时使其获取焦点
    this.clickFun()
  },
  methods: {
    ...mapMutations({}),
    // 监听到键盘回车事件,即扫码枪一次扫描结束,检测到回车事件以后直接把值传递给父组件以后把值直接清空
    enter() {
      this.$emit('codeScanningOk', this.inputValue);
      // 把值传递过去之后清空输入框,防止用于手速过快重复扫描
      this.inputValue = ''
    },
    // 获焦
    clickFun() {
      this.$refs.erWeimaShuru.focus()
      // document.getElementById("inputId").focus()
    },
    // 失焦
    blurInput() {
      // 失焦后自动再次获取焦点
      this.clickFun()
    }
  },

方法二：将得焦事件绑定到document上，使用此方法一定要在组件销毁移除监听的这个事件

  mounted() {
    // 在文档中添加点击事件。当用户在文档任何地方点击时input框自动获取焦点,以此来达到扫码枪扫描到的数据永远都是输入到该input框中
    document.addEventListener('click', this.clickFun)
  },
  methods: {
    // 监听到键盘回车事件,即扫码枪一次扫描结束,检测到回车事件以后直接把值传递给父组件以后把值直接清空
    enter() {
      this.$emit('codeScanningOk', this.inputValue);
      // 把值传递过去之后清空输入框,防止用于手速过快重复扫描
      this.inputValue = ''
    },
    // 获焦
    clickFun() {
      this.$refs.erWeimaShuru.focus()
      // document.getElementById("inputId").focus()
    },
  },  
  beforeDestroy() {
    // 组件销毁时移除该点击事件
    document.removeEventListener("click", this.clickFun)
  },