vue 移动端 点击调用扫一扫

 安装：npm install vue-qrcode-reader

 

<template>
  <div>
    <button @click="startScanning">开始扫码</button>
    <qrcode-stream v-if="isScanning" @decode="handleDecode" @init="onInit" @stop="onStop"></qrcode-stream>
    <p v-if="scanResult">扫描结果: {{ scanResult }}</p>
  </div>
</template>

<script>
import { QrcodeStream } from 'vue-qrcode-reader';

export default {
  components: {
    QrcodeStream,
  },
  data() {
    return {
      isScanning: false,
      scanResult: '',
    };
  },
  methods: {
    startScanning() {
      this.isScanning = true;
    },
    handleDecode(result) {
      this.scanResult = result;
      this.isScanning = false; // 扫描成功后自动停止
    },
    onInit(promise) {
      promise.catch(error => {
        if (error.name === 'NotAllowedError') {
          alert('请允许访问摄像头以进行扫码。');
        } else if (error.name === 'NotFoundError') {
          alert('未找到二维码扫描设备。');
        } else {
          alert('初始化二维码扫描时发生错误: ' + error.message);
        }
        this.isScanning = false;
      });
    },
    onStop() {
      this.isScanning = false;
    },
  },
};
</script>

在这个组件中：

• isScanning 数据属性用于控制是否显示二维码扫描流。
• startScanning 方法通过点击按钮触发，将 isScanning 设置为 true，从而显示二维码扫描界面。
• handleDecode 方法在成功扫描二维码后被调用，它会保存扫描结果并停止扫描。
• onInit 方法处理初始化扫描时可能出现的错误，并在发生错误时停止扫描。
• onStop 方法在扫描停止时被调用，这里简单地将 isScanning 设置为 false。

现在，当用户点击“开始扫码”按钮时，会启动二维码扫描功能。扫描成功后，结果会显示在页面上，并且扫描界面会自动关闭。如果用户拒绝访问摄像头或设备不支持二维码扫描，将显示相应的错误消息。