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

背景

接《VUE扫码枪中文输入法兼容自动回车事件(上)》 文章里提到使用type为password可以忽略输入法的中英文兼容问题，但是password和浏览器之间本身就有自动历史密码填充的提示交互，如果想要禁用这个提示，就要使用 readOnly这个属性

交互设计

1、默认readOnly为true
2、onFocus时放开，因为用户要输入内容，onBlur时关闭，此时防止弹窗提示
3、往往在自动enter事件时会有接口请求动作，在这个动作之前关闭readOnly，禁用提示

代码

<template>
  <div style="position:relative;width:100%">
    <el-input
      type="password"
      v-model="barCode"
      autocomplete="new-password"
      class="pad-input"
      ref="barcodeScanRef"
      @keyup.enter.native="autoEnterHandle"
      @focus="handleInputFocus"
      @blur="handleInputBlur"
      @click.native="clickEvt"
      @input="pwdInput"
      :readonly="readonly"
    ></el-input>
    <div id="show" disabled>
      <span>{{ barCode.toLocaleUpperCase() }}</span>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    enterHandle: {
      type: Function,
      default: () => () => {},
    },
  },
  data() {
    return {
      barCode: '',
      readonly: true,
    };
  },
  methods: {
    autoEnterHandle() {
      this.readonly = true;
      this._props.enterHandle();
    },
    clickEvt() {
      if (this.$refs.barcodeScanRef) {
        this.$refs.barcodeScanRef.$refs.input.onmousedown = evt => {
          if (evt) {
            evt.preventDefault();
            evt.stopPropagation();
          }
          console.log(this.$refs.barcodeScanRef.$refs.input.value);
          if (this.$refs.barcodeScanRef.$refs.input.value === '' || this.readonly) {
            this.$refs.barcodeScanRef.$refs.input.blur();
            setTimeout(() => {
              this.$refs.barcodeScanRef.$refs.input.focus();
            }, 0);
          }
          return false;
        };
      }
    },
    pwdInput(e) {
      if (!e) {
        this.readonly = true;
      }
    },
    handleInputBlur(e) {
      if (e) {
        e.stopPropagation();
      }
      this.readonly = true;
      this.handleMymove('0');
    },
    handleInputFocus(e) {
      if (e) {
        e.stopPropagation();
        e.preventDefault();
      }
      setTimeout(() => {
        this.readonly = false;
      }, 100);
      this.handleMymove('1');
    },
    handleMymove(num) {
      let style = document.createElement('style');
      document.head.appendChild(style);
      let sheet = style.sheet;
      if (num === '0') {
        sheet.addRule('#show:after', `opacity:${num};animation:null`);
        sheet.insertRule(`#show:after{opacity:${num};animation:null}`);
      } else {
        sheet.addRule('#show:after', `opacity:${num};animation: mymove 1.2s infinite;`);
        sheet.insertRule(`#show:after{opacity:${num};animation: mymove 1.2s infinite;}`);
      }
    },
  },
};
</script>
<style lang="less">
#show {
  padding-left: 14px;
  position: absolute;
  left: 2px;
  top: 50%;
  transform: translate(0, -50%);
  border: none;
  height: 30px;
  line-height: 30px;
  pointer-events: none;
  background: #fff;
  width: 98%;
}
#show:after {
  content: '';
  display: inline-block;
  height: 15px;
  position: relative;
  border-right: solid 1px #666;
  top: 2px;
  left: 1px;
  opacity: 0;
}
.pad-input {
  height: 28px;
  width: 100%;
  border: none;
  background: none;
  text-transform: uppercase;
  -webkit-text-security: disc !important;
}
.pad-input:focus + #show:after {
  animation: mymove 1.2s infinite;
}

@keyframes mymove {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0;
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
</style>