vue3.0, vue2.0项目h5，pc端实现扫描二维码（qrcode-reader-vue3 ， @zxing/library和vue-qrcode-reader）

在Vue 3项目中实现扫描二维码功能，可以使用qrcode-reader-vue3库，这是一个基于Vue 3和@zxing/library的二维码扫描组件。

首先，安装所需依赖：

npm install qrcode-reader-vue3 @zxing/library

然后，在Vue组件中使用qrcode-reader-vue3：

<template>
  <qrcode-reader
    :video-constraints="videoConstraints"
    @decode="onDecode"
    @init="onInit"
  ></qrcode-reader>
</template>
 
<script setup>
import { ref } from 'vue';
import { QrcodeReader } from 'qrcode-reader-vue3';
 
const videoConstraints = ref({
  facingMode: 'environment',
});
 
const onDecode = (result) => {
  console.log(result);
};
 
const onInit = (delayed = false) => {
  console.log(`Decoder ${delayed ? 'delayed' : 'quick'} initialized`);
};
</script>

这段代码创建了一个扫描二维码的组件，并在扫描到二维码时触发onDecode方法，该方法会输出结果。videoConstraints用于指定视频输入源，例如使用环境摄像头。

请注意，根据浏览器的安全策略和用户的权限，网站可能需要获得用户的摄像头权限才能访问视频流。此外，在移动端和桌面端的实现可能会略有不同，具体还需要考虑到兼容性和性能优化等问题。