vue扫描识别条形码

可以使用第三方库 QuaggaJS 来实现 Vue 扫描识别条形码的功能。具体步骤如下：

1. 安装 QuaggaJS 库：`npm install quagga --save`

2. 在 Vue 组件中引入 QuaggaJS 库：`import Quagga from 'quagga'`

3. 在 mounted 钩子函数中初始化 QuaggaJS：

mounted() {
  Quagga.init({
    inputStream: {
      name: "Live",
      type: "LiveStream",
      target: document.querySelector('#barcode-scanner')
    },
    decoder: {
      readers: ["ean_reader"]
    }
  }, function(err) {
    if (err) {
      console.log(err);
      return
    }
    console.log("QuaggaJS initialization finished.");
    Quagga.start();
  });
}

4. 在 template 中添加一个 video 标签用于显示摄像头捕捉到的图像，并为其设置 id 为 barcode-scanner。

<template>
  <div>
    <video id="barcode-scanner"></video>
  </div>
</template>

5. 在 beforeDestroy 钩子函数中停止 QuaggaJS：

beforeDestroy() {
  Quagga.stop();
}

6. 在 QuaggaJS 的回调函数中处理识别到的条形码：

Quagga.onDetected(function(result) {
  console.log("Barcode detected and processed : [" + result.codeResult.code + "]", result);
});