vue3实现二维码扫描

在 Vue 3 中实现二维码扫描，你可以使用一个名为 `vue-qrcode-reader` 的第三方库来完成。下面是实现的步骤：

1. 首先，在你的 Vue 3 项目中安装 `vue-qrcode-reader`：

npm install vue-qrcode-reader

2. 在你的 Vue 组件中引入 `vue-qrcode-reader`：

import QrcodeReader from 'vue-qrcode-reader';

3. 注册 `vue-qrcode-reader` 插件：

app.use(QrcodeReader);

其中，`app` 是你创建的 Vue 应用实例。

4. 在你的 Vue 组件模板中添加二维码扫描的相关代码：

<template>
  <div>
    <qrcode-reader @decode="onDecode"></qrcode-reader>
    <div v-if="scannedData">
      <p>扫描结果: {{ scannedData }}</p>
    </div>
  </div>
</template>

5. 在 Vue 组件的 `methods` 中定义 `onDecode` 方法来处理扫描结果：

methods: {
  onDecode(scannedData) {
    this.scannedData = scannedData;
  }
}

这里，我们将扫描结果保存在 `scannedData` 变量中，并在模板中显示出来。

现在，你就可以在你的 Vue 3 项目中实现二维码扫描了。记得按照文档提供的方式进行样式和其他配置的调整，以满足你的需求。