vue3+ts 扫码插件

你可以使用 QuaggaJS，它是一个基于 JavaScript 的条码和二维码扫描库。它支持多种格式的条码和二维码，包括 EAN、CODE 128、CODE 39、ITF、UPC、QR 码等等。同时，QuaggaJS 也支持 TypeScript。

在 Vue 3 中使用 QuaggaJS，你可以先安装它：

npm install quagga --save

然后在组件中引入：

import { ref, onMounted } from 'vue';
import Quagga from 'quagga';

export default {
  setup() {
    const scanner = ref(null);

    onMounted(() => {
      Quagga.init({
        inputStream: {
          name: 'Live',
          type: 'LiveStream',
          target: scanner.value,
        },
        decoder: {
          readers: ['ean_reader', 'code_128_reader', 'code_39_reader', 'upc_reader', 'qr_reader'],
        },
      }, (err) => {
        if (err) {
          console.error(err);
          return;
        }
        Quagga.start();
      });
    });

    return {
      scanner,
    };
  },
};

在模板中使用：

<template>
  <div>
    <div ref="scanner"></div>
  </div>
</template>

这样就可以在页面中显示一个实时的扫码窗口，当扫描到条码或二维码时，QuaggaJS 会自动解码并返回相应的数据。你可以在回调函数中处理这些数据，比如发送给后端进行处理。