VUE扫码枪中文输入法兼容自动回车事件(上)

背景

最近产品想要在页面上加一个input输入框，想要手动输入，也想要扫码枪扫描输入，大家都知道扫码枪扫描后会自动出发input的回车enter事件的，我当初也是这么认为的，所以在input上就直接绑定了keyup enter事件，在里面做一些接口请求之类的动作，后来这个页面被投放到门店的收银机，问题出现了：当机器为windows系统并且搜狗输入法中文时，扫码枪没有监听到自动回车事件，导致扫描枪没反应

解决方案

password的Input可以忽略输入法的中英文，所以password框里的内容，我们需要一个覆盖在上面的div来实时展示，这个div要像一个input存在，所以要模拟一个失焦和聚焦的闪烁光标，光标闪烁时真正聚焦的是password input框

需求设计

1. 一个div和一个type为password ，两者数据实时绑定
2. div覆盖在password上，设定一个伪类来实现div的闪烁光标
3. password的focus和blur方法中控制div的光标是否显示
4. div的不设宽度，促使光标紧随div内容后面

代码

先写一个barcode.vue的子组件

<template>
  <div style="position: relative;width: 200px;">
    <el-input
      type="password"
      v-model="barCode"
      autocomplete="off"
      class="pad-input"
      ref="barcodeScanRef"
      @keyup.enter.native="enterHandle"
      @focus="handleInputFocus"
      @blur="handleInputBlur"
    ></el-input>
    <div id="show" disabled>
      <span>{
   {
    barCode }}</span>
    </div>
  </div>
</template>
<script>
export default {
   
  props: {
   
    enterHandle: {
   
      type: Function,
      default: () => () => {
   },
    },
  },
  data() {
   
    return {
   
      barCode: ''