VUE html5-qrcode H5扫一扫功能

在Vue项目中，你可以使用html5-qrcode库来实现H5扫一扫功能。以下是一个简单的例子：

首先，安装html5-qrcode库：

npm install html5-qrcode

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

<template>
  <div>
    <button @click="startScan">扫一扫</button>
    <p v-if="result">扫描结果：{{ result }}</p>
  </div>
</template>
 
<script>
import { Html5QrcodeScanner } from 'html5-qrcode';
 
export default {
  data() {
    return {
      result: null,
      html5QrCodeScanner: null,
    };
  },
  methods: {
    startScan() {
      this.html5QrCodeScanner = new Html5QrcodeScanner(
        "reader", { fps: 10, qrbox: 250 }, (decodedText, decodedResult) => {
          this.result = decodedText;
          this.html5QrCodeScanner.stop();
        },
        (error) => {
          console.error(error);
        }
      );
      this.html5QrCodeScanner.render(
        {
          width: 250,
          height: 250,
        },
        "reader"
      );
    },
  },
};
</script>
 
<style>
#reader {
  margin: auto;
  width: 250px;
  height: 250px;
}
</style>

在这个例子中，我们创建了一个startScan方法，当按钮被点击时，会启动扫描。扫描结果会存储在result数据属性中，并显示在页面上。Html5QrcodeScanner的实例会在扫描完成后调用stop方法停止摄像头。

请确保你的Vue模板中有一个元素与readerID相对应，这个元素将用作扫描框。

注意：这个例子假设你的页面上有一个元素<div id="reader"></div>来承载扫描框和结果显示。此外，由于涉及摄像头使用，请确保你的网站在HTTPS下运行，并且得到用户的相应授权。