在一些项目中需要用到扫码枪扫描二维码来快速在input输入框中获取相关产品的编码，但是有些扫码枪在扫码的时候无法获取完整的编号，可能会缺失几个编号，因此必须将输入法改为英文状态才会获取完整的编码。

博主采用的方法是目前网络上已有的方法，也是相对简单的方法，采用password文本框和text文本框等两个文本框来实现。先贴上代码再进行解释。代码如下：

<template>
  <div>
    <el-form>
      <el-form-item label="输入条码">
        <el-input v-model="searchCode" type="password" ref="barcode" @change="handleFocus" style="width: 200px; z-index: -999;"></el-input>
        <el-input v-model="searchCode" type="text" placeholder="输入条码" ref="input"  @focus="test" readonly="readonly" style="width:200px;"></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
	name: "xxxx",
	data() {
		return {
			searchCode: '',
			oldSearchCode: ''
		}
	},
	methods: {
		handleFocus() {
			if (this.timer) {
				clearTimeout(this.timer)
			}
			this.oldSearchCode = this.searchCode; //已经获得值，
			this.timer = setTimeout(this.checkValue, 1000) //执行扫码后的跳转工作，即跳转到某一信息页或其他相关跳转
		}，
		test(){
			this.$refs.barcode.select()
		},
			checkValue() {
			if (this.searchCode == this.oldSearchCode) {
				//通过this.searchCode == this.oldSearchCode确定已经扫到值，然后在此执行获得编码以后得操作，如查询相关编码的信息
		 }
		}
	},
	mounted() {
		if (this.$refs.input) {
			this.$nextTick(() => {
				this.$refs.barcode.select()
			})
		}
	}
}
</script>

其主要代码就如上所示，首先，如果我们只想测试是否能够在中文状态下完成完整编号的获取，下图中红框的方法就可以先不写，因为该方法是实现扫码完成后根据编码跳转到相关编码的详情页的。

接下来我们对相关代码进行逐步解释。
1.首先我们看图1.1中红框中设置的相关变量的用处，searchCode绑定到两个输入框上，是因为当我们在type=“password”的密码输入框中获取到相关编码后，因为设置的两个输入框绑定是同一searchCode，所以就能将密码框的编码同步到条码框。z-index为-999是为了隐藏密码框，使密码框获取编码的界面隐藏，从视图上只有“输入条码”框，但实际上“输入条码”框中的编号是密码框同步过来的。通过密码框同步到编码框可以解决扫码枪中文扫不全的问题，这是因为密码框只能输入字母和数字，因此首先在密码框中扫码获取编号，再同步到条码框，完成完整编码的获取。而我们又将密码框隐藏，其实际视图如图1.2所示。ref = "barcode 和 ref = input两个声明，是为了获取相关输入框的dom，接下来在第2点中我们会进行解释。
图1.1

图1.2

2.我们在钩子函数中定义了图2.1的逻辑，该逻辑是为了在初始加载页面后，判断 ref=input所在的dom节点是否存在，如果存在就执行this.$refs.barcode.select()，选中密码框的dom节点，该定位是通过密码框中声明的ref=barcode定位到密码框。因此通过mounted中的逻辑就可以实现首次加载就把焦点定位到密码框，直接可以扫码输入。
图2.1

3.在图3.1密码框中定义检测变化的方法@change和条码框中@focus方法，之所以这样设计有如下原因。
（1.）当我们在页面首次加载完后，由于mounted的执行可以把选择定位到密码文本框完成扫码，在第一次扫码完成后，我们手动删减文本框中的编码准备第二次扫码时，因为页面中密码框已隐藏，我们只能点击条码框，当点击条码文本框时调用图3.2的@foce=test()方法，即执行this.$refs.barcode.select()，重新选择到密码框,进而实现扫描二维码获得的条码是从密码框输入的，避免中英文输入法问题。@change = "handleFocus"方法是为了检测到输入框的数据变化后执行相应的逻辑，在图3.3中，就是执行获取编码后相关跳转工作，this.oldSearchCode = this.searchCode;是进入相关跳转页面的判断条件，在此可以读者先不用管，因为我们主要是解决中英文状态下扫码枪扫码问题，至于之后的逻辑可由读者根据自己的实际项目进行相关的自我处理。
（2.）@change = "handleFocus"方法读者可能认为也可以放在条码框中，我也尝试过，但是好像放在这里可能会与@focus方法冲突，导致扫码会扫不上，或者手动输入也无反应，因此把该方法放在密码框中。
图3.1

图3.2

图3.3

以上就是我们通过双输入框来解决扫码枪中文状态下获取编码错误的问题，该方法比较简单且有缺点，明显可见的不足就是没有光标。后期还需要进行相应的调整。