Vue--扫码枪，输入法为中文时乱码

最新推荐文章于 2023-07-12 11:35:53 发布

迷阵

最新推荐文章于 2023-07-12 11:35:53 发布

阅读量2.2k

点赞数 1

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_43047070/article/details/126853879

版权

vue 专栏收录该内容

41 篇文章 0 订阅

订阅专栏

预备方案

1.使用password，直接展示
2.使用email，切换展示
3.使用password，切换展示

解决方案

一开始使用password类型，但是有一个问题一直解决不了：点击保存的时候，浏览器会弹出保存/更新密码。所以改用email类型。
原理：
因为扫码枪是模拟键盘的回车按键，所以输入的时候切换成email类型的输入框。输入完再赋值

template：

  <template v-if="scanReadonly">
          <el-input
            v-model="scanValue"
            placeholder="请扫描合同二维码"
            autofocus
            readonly
            type="text"
          />
        </template>
        <template v-else>
          <el-input
            ref="scanValue"
            v-model="scanValue"
            placeholder="请扫描合同二维码"
            autofocus
            type="email"
            name="scanValue"
            :trigger-on-focus="false"
            autocomplete="off"
            @blur="inputBlur()"
            @focus="inputFocus()"
            @keydown.enter.native="payCode(scanValue)"
          />
        </template>

data:

 scanVisible: false,
 scanValue: '',
 scanContractInfo: '',
 scanReadonly: true

script：

// 扫描合同
    scanContract() {
      this.scanVisible = true
      this.scanValue = ''
      this.scanContractInfo = ''
      this.scanReadonly = false

      this.$nextTick(() => {
        this.$refs.scanValue.focus()
      })
    },
    closeScan() {
      this.scanValue = ''
      this.scanContractInfo = ''
      this.$nextTick(() => {
        this.scanVisible = false
      })
    },
    inputFocus(e) {
      // 获取焦点时 同时去除只读，这样可以获取光标，进行输入
      this.scanReadonly = false
      this.$nextTick(() => {
        this.$refs.scanValue.focus()
      })
    },
    payCode(e) {
      // 这里进行扫码枪扫码后的操作，调后台接口
      this.scanValue = e
      this.scanContractInfo = ''
      this.scanReadonly = true
    },
    inputBlur(e) {
      this.scanReadonly = false
      setTimeout(() => {
        this.$nextTick(() => {
          if (this.$refs.scanValue) {
            this.$refs.scanValue.focus()
          }
        })
      }, 10)
    },
    handleScan() {
      if (this.scanValue === '') {
        this.$message.error('请扫描合同二维码')
        return false
      }
      var reg = new RegExp("[\\u4E00-\\u9FFF]+", "g")
      if (reg.test(this.scanValue)) {
        this.$message.error('请切换输入法为英文后重新扫描合同二维码')
        return false
      }
      decryptFile({ decryptText: this.scanValue }).then((res) => {
        if (res.success) {
          this.scanContractInfo = JSON.parse(res.data || '{}')
          this.$router.push({ path: `/common/contract/${this.scanContractInfo.contractId}` })
          this.closeScan()
        }
      })
    }