这篇文章，是纯借鉴下面这一篇文章的，感觉下面这一篇文章写的非常好

 uniapp监听扫码枪键盘事件|无输入框式监听_uniapp如何监听扫码枪回车事件-CSDN博客 

https://blog.csdn.net/hcy5201314521/article/details/135249688

一般的扫码枪通过USB或蓝牙连接手机或电脑，充当的是一个外接设备。当扫码后，扫码枪会自动识别内容，然后向连接的电脑或手机发送键盘事件keydown或keyup。

input输入框式

如果页面上有input输入框就很简单，直接聚焦input，然后扫码，input框会自动填充内容，并自动产生回车事件，代码只需处理回车事件即可。

(这是用的vue3的逻辑)

<template>
    <input v-model="inputString" @confirm="onConfirm" />
</template>
 
<script setup>
import { ref } from "vue"
const inputString = ref("")
const onConfirm = () => {
    console.log('输入的值为', inputString.value)
}
</script>

这是用的vue2的逻辑

<template>
    <input v-model="inputString" @confirm="onConfirm" />
</template>
 
<script>
export default {
  data() {
    return {
      inputString: ""
    };
  },
  methods: {
    onConfirm() {
      console.log('输入的值为', this.inputString);
    }
  }
}
</script>

• data 函数返回一个对象，该对象包含组件的响应式状态。在这个例子中，我们有一个名为 inputString 的状态变量。
• methods 对象包含组件的方法，这里我们定义了 onConfirm 方法，它将在事件发生时被触发。

请注意，Vue 2 中绑定方法到模板时，不需要使用 setup 属性。所有的方法和数据都直接通过 data 和 methods 访问。此外，Vue 2 不使用 <script setup> 语法。

以上代码，h5、App都适用。

无输入框式 

没有input框时，就需要监听页面的键盘事件。h5可以使用document.keyup来监听，但是app里没有document，只能使用plus.key来监听。处理逻辑一样，只是监听方式不一样。 

同时兼容H5和APP的用法

这是用的vue3的逻辑

<template>
    <view>监听到的内容：{{inputString}}</view>
</template>
 
<script setup>
import { ref } from "vue"
import { onLoad, onShow, onHide, onBackPress, onUnload } from "@dcloudio/uni-app";
const inputString = ref('')
const keyCodeCache = ref([])
const inputCache = ref('')
const onConfirm = (code)=>{
    console.log('拿到的code', code);
    // 此处写我们自己的逻辑
}
const keypress = (e) => {
    if (e.keyCode === 66 || e.key =='Enter') {
        inputString.value = inputCache.value;
        onConfirm(inputString.value)
        inputCache.value = '';
    } else {
        inputCache.value += e.key
    }
}
 
 
onLoad((options) => {
    // #ifdef APP-PLUS
    plus.key.addEventListener("keyup", keypress);
    // #endif 
    // #ifdef H5
    document.addEventListener("keyup", keypress);
    // #endif
})
onUnload(()=>{
    // #ifdef APP-PLUS
    plus.key.removeEventListener("keyup", keypress);
    // #endif
    // #ifdef H5
    document.removeEventListener("keyup", keypress);
    // #endif
})
onHide(()=>{
    // #ifdef APP-PLUS
    plus.key.removeEventListener("keyup", keypress);
    // #endif
    // #ifdef H5
    document.removeEventListener("keyup", keypress);
    // #endif
})
onBackPress(()=>{
    // #ifdef APP-PLUS
    plus.key.removeEventListener("keyup", keypress);
    // #endif
    // #ifdef H5
    document.removeEventListener("keyup", keypress);
    // #endif
})
</script>

这是用的vue2的逻辑

<template>
    <view>监听到的内容：{{ inputString }}</view>
</template>
 
<script>
export default {
  data() {
    return {
      inputString: '',
      inputCache: ''
    };
  },
  methods: {
    onConfirm(code) {
      console.log('拿到的code', code);
      // 此处写我们自己的逻辑
    },
    keypress(e) {
      if (e.keyCode === 66 || e.key === 'Enter') {
        this.inputString = this.inputCache;
        this.onConfirm(this.inputString);
        this.inputCache = '';
      } else {
        this.inputCache += e.key;
      }
    }
  },
  mounted() {
    // #ifdef APP-PLUS
    plus.key.addEventListener("keyup", this.keypress);
    // #endif 
    // #ifdef H5
    document.addEventListener("keyup", this.keypress);
    // #endif
  },
  beforeDestroy() {
    // #ifdef APP-PLUS
    plus.key.removeEventListener("keyup", this.keypress);
    // #endif 
    // #ifdef H5
    document.removeEventListener("keyup", this.keypress);
    // #endif
  },
  deactivated() {
    // #ifdef APP-PLUS
    plus.key.removeEventListener("keyup", this.keypress);
    // #endif 
    // #ifdef H5
    document.removeEventListener("keyup", this.keypress);
    // #endif
  }
};
</script>

要将这段代码从 Vue 3 的 Composition API 改写为 Vue 2 的选项式 API（Options API），你需要做一些关键的调整。主要的变化是将 ref 替换为 data 函数，将 onLoad, onShow, onHide, onBackPress, 和 onUnload 的逻辑移动到 Vue 2 的生命周期钩子中，并将 keypress 函数和 onConfirm 函数定义在 methods 中。下面是改写后的代码：

在这个 Vue 2 版本中：

• 将数据定义在 data() 函数中，这是 Vue 2 管理响应式数据的方式。
• 将函数定义在 methods 对象中。
• 使用 mounted 钩子来添加事件监听器，这个钩子在组件首次渲染到 DOM 后被调用。
• 使用 beforeDestroy 钩子来清理事件监听器，这个钩子在组件销毁前被调用。
• 使用 deactivated 钩子来处理组件停用时的事件清理，适用于 <keep-alive> 缓存的组件。

请注意，#ifdef 指令是 uni-app 特有的，用于条件编译。它不是标准的 Vue 语法，但在 uni-app 项目中有效。

可能出现的问题：

实际运行时，可能出现键盘的key和keyCode不兼容问题，不同的设备对应的键盘keyCode可能也不一样，首先要设置扫码枪的键盘模式，然后做一层转换。
下面的扫码枪设置为US Keyboard的转换部分逻辑

import keymap from './keymap'
const keypress = (e) => {
    if (e.keyCode === 66 || e.key =='Enter') {
        inputString.value = inputCache.value;
        inputCache.value = '';
        onConfirm(inputString.value)
    } else {
        inputCache.value += keymap[e.keyCode] || ''
    }
}

// keymap.js 以下来源网络收集，不同的设备对应的keyCode可能不同
export default {
	"7": "0",
	"8": "1",
	"9": "2",
	"10": "3",
	"11": "4",
	"12": "5",
	"13": "6",
	"14": "7",
	"15": "8",
	"16": "9",
	"29": "A",
	"30": "B",
	"31": "C",
	"32": "D",
	"33": "E",
	"34": "F",
	"35": "G",
	"36": "H",
	"37": "I",
	"38": "J",
	"39": "K",
	"40": "L",
	"41": "M",
	"42": "N",
	"43": "O",
	"44": "P",
	"45": "Q",
	"46": "R",
	"47": "S",
	"48": "T",
	"49": "U",
	"50": "V",
	"51": "W",
	"52": "X",
	"53": "Y",
	"54": "Z",
	"55": ",",
	"56": ".",
	"59": "",
	"69": "-",
	"70": "=",
	"81": "+"
}