使用html5-qrcode 扫描二维码(vue3)

要在Vue 3项目中使用html5-qrcode扫描二维码，首先需要安装html5-qrcode库：

npm install html5-qrcode

然后，可以创建一个Vue组件来实现扫描功能。以下是一个简单的例子：

<template>
  <div>
    <input type="file" @change="handleScan" />
    <div v-if="result">扫描结果：{{ result }}</div>
  </div>
</template>
 
<script>
import { Html5Qrcode } from "html5-qrcode";
 
export default {
  data() {
    return {
      result: null,
    };
  },
  methods: {
    handleScan(event) {
      const file = event.target.files[0];
      if (!file) {
        return;
      }
 
      const qrCode = new Html5QrcodeScanner(
        "html5QrCode",
        function (decodedText, decodedResult) {
          this.result = decodedText;
          // 扫描成功后的操作
        },
        function (error) {
          console.error(error);
        },
        { fps: 10, qrbox: 250 } // 可选配置
      );
      qrCode.render(
        {
          width: 300,
          height: 200,
        },
        onRenderingFinished
      );
 
      function onRenderingFinished(state) {
        if (state === "error") {
          qrCode.stop();
        }
      }
 
      const image = new Image();
      image.src = URL.createObjectURL(file);
      image.onload = function () {
        qrCode.decode(image);
      };
    },
  },
};
</script>

在这个例子中，我们创建了一个Vue组件，其中包含一个文件输入元素和一个用于显示扫描结果的div。当用户选择一个图片文件时，我们使用Html5QrcodeScanner来扫描图片中的二维码。扫描成功后，我们将结果存储在组件的数据中，并可以根据需要进行处理。