vue3 html5-qrcode 实现扫描二维码 仿照wx扫码样式

在Vue 3中，你可以使用html5-qrcode库来实现扫描二维码的功能，并且可以仿照微信的扫码样式。以下是一个简单的实现示例：

首先，确保你已经安装了html5-qrcode：

npm install html5-qrcode

然后，在你的Vue组件中使用它：

<template>
  <div>
    <div v-if="!isScanning" class="qrcode-container">
      <video ref="videoElement" autoplay></video>
      <button @click="startScan">扫一扫二维码</button>
    </div>
    <div v-if="result" class="qrcode-result">
      扫描结果：{{ result }}
    </div>
  </div>
</template>
 
<script>
import { Html5QrcodeScanner } from 'html5-qrcode';
 
export default {
  data() {
    return {
      isScanning: false,
      result: null,
    };
  },
  methods: {
    startScan() {
      this.isScanning = true;
      const html5QrCode = new Html5QrcodeScanner(
        this.$refs.videoElement,
        (decodedText, decodedResult) => {
          this.result = decodedText;
          this.isScanning = false;
          html5QrCode.stop();
        },
        (error) => {
          this.isScanning = false;
          console.error(error);
        }
      );
      html5QrCode.start({ facingMode: "environment" }, { fps: 10, qrbox: 250 });
    },
  },
};
</script>
 
<style>
.qrcode-container {
  position: relative;
  width: 300px;
  height: 200px;
}
 
.qrcode-container video {
  width: 100%;
  height: 100%;
}
 
.qrcode-container button {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
}
 
.qrcode-result {
  margin-top: 10px;
  padding: 10px;
  border: 1px solid #ddd;
}
</style>

在这个示例中，我们创建了一个简单的Vue 3组件，其中包含一个扫描按钮和一个视频元素来显示摄像头的预览。当用户点击扫描按钮时，会启动扫描过程，扫描到二维码后显示结果，并停止扫描。扫描样式可以通过CSS自定义来仿照微信的样式。