vue2 html5-qrcode

### 在 Vue 2 中使用 `html5-qrcode` 实现二维码扫描

为了在 Vue 2 项目中集成并使用 `html5-qrcode` 来实现二维码扫描功能，可以按照如下方式构建组件：

#### 安装依赖库
首先，在项目根目录下通过 npm 或 yarn 安装 `@mauron85/html5-qrcode` 库。

npm install @mauron85/html5-qrcode

或者

yarn add @mauron85/html5-qrcode

#### 创建 QRCode 组件
创建一个新的 Vue 单文件组件用于处理二维码扫描逻辑。这里定义了一个名为 `QRScanner.vue` 的组件来封装所有的交互行为。

<template>
  <div id="qrcode-scanner-container">
    <!-- 显示摄像头视频流 -->
    <video ref="scanner" width="300px"></video>

    <!-- 扫描结果显示区域 -->
    <p v-if="lastResult">{{ lastResult }}</p>
    
    <!-- 错误提示信息 -->
    <p style="color:red;" v-if="errorMessage">{{ errorMessage }}</p>
  </div>
</template>

<script>
import Html5Qrcode from "html5-qrcode";

export default {
  name: 'QRScanner',
  data() {
    return {
      qrScanner: null,
      lastResult: "",
      errorMessage: ""
    };
  },
  mounted() {
    const config = { fps: 10, qrbox: 250 }; // 配置参数
    this.qrScanner = new Html5Qrcode("scanner");

    function onScanSuccess(decodedText, decodedResult) {
      console.log(`扫码成功: ${decodedText}`, decodedResult);
      this.lastResult = decodedText;
      
      // 停止扫描器工作
      this.stop();
    }

    function onScanFailure(error) {
      console.warn('扫码失败:', error);
      this.errorMessage = "无法解析二维码";
    }
    
    try {
      this.qrScanner.start({ facingMode: "environment" }, config, (result, err) => {
        if(result){
          onScanSuccess.call(this, result);
        }else{
          onScanFailure.call(this, err);
        }
      });
    } catch (err) {
      console.error(err);
      this.errorMessage = "启动相机失败";
    }
  },
  methods: {
    stop(){
      if(this.qrScanner && typeof this.qrScanner !== undefined){
        this.qrScanner.stop().then(ignore => {
            console.log("停止扫描");
        }).catch((err) => {
            console.error(err);
        });
      }
    }
  },
  beforeDestroy() {
    this.stop(); // 页面销毁前关闭扫描仪
  }
};
</script>

<style scoped>
#qrcode-scanner-container video {
  border: 1px solid black;
}
</style>

此代码片段展示了如何初始化 HTML5-QRCode 对象，并将其绑定到指定 DOM 节点上[^1]。当检测到有效二维码时会触发回调函数更新界面显示的内容；如果遇到错误也会相应地给出反馈。