Vue 实现简单的二维码扫描功能

Vue 本身并没有提供二维码扫描的功能，需要借助第三方库来实现。以下是使用 QuaggaJS 库实现简单的二维码扫描功能的代码示例。

1. 安装 QuaggaJS 库

npm install quagga

2. 在 Vue 组件中引入 QuaggaJS 库并初始化

<template>
  <div>
    <div id="interactive" class="viewport"></div>
  </div>
</template>

<script>
import Quagga from 'quagga';

export default {
  mounted() {
    Quagga.init({
      inputStream: {
        name: "Live",
        type: "LiveStream",
        target: document.querySelector('#interactive')
      },
      decoder: {
        readers: ["ean_reader", "ean_8_reader", "code_128_reader", "code_39_reader", "code_39_vin_reader", "codabar_reader", "upc_reader", "upc_e_reader", "i2of5_reader"],
        debug: {
          drawBoundingBox: true,
          showFrequency: true,
          drawScanline: true,
          showPattern: true
        }
      }
    }, function (err) {
      if (err) {
        console.log(err);
        return;
      }
      console.log("Initialization finished. Ready to start");
      Quagga.start();
    });
  },
  beforeDestroy() {
    Quagga.stop();
  },
};
</script>

3. 在组件样式中添加样式

<style scoped>
.viewport {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: white;
}
</style>

4. 在浏览器中打开页面，即可看到二维码扫描功能的效果。

注意：在使用 QuaggaJS 库时，需要注意浏览器的安全限制，部分浏览器可能需要在 HTTPS 环境下才能使用摄像头。