vue实现扫码识别功能 h5页面实现扫码识别功能

本文主要介绍h5实现扫码功能的基本方法，主要以vue3框架为例。

首先安装一下插件 vue3-qr-reader

npm install vue3-qr-reader

在main.js引入插件，当然你也可以在使用组件的地方挂载一下

import * as QR from 'vue3-qr-reader';
app.component('QrStream',QR.QrStream)
app.component('QrCapture',QR.QrCapture)
app.component('QrDropzone',QR.QrDropzone)

也可以使用下面这种方法，在页面内注册组件

<script lang="ts">
// import { QrStream, QrCapture, QrDropzone } from 'vue3-qr-reader';
// import * as QR from 'vue3-qr-reader';
import { defineComponent, ref, Ref, reactive, toRefs } from 'vue'
export default defineComponent({
  name: 'Qrcode3',
  // components: {
  //   QrStream:QR.QrStream,
  // },
  setup() {
    const state = reactive({
      data: null
    })
    const onDecode = (data: any) => {
      state.data = data
      console.log(data)
    }
    return {
      ...toRefs(state),
      onDecode,
    }
  }
})

在页面内挂载和使用对应组件的方法

<div class="stream">
    <qr-stream @decode="onDecode" class="mb" >
      <div style="color: red;" class="frame"></div>
    </qr-stream>
  </div>

注意一下，onDecode 里面的方法就是实时返回的扫码数据。上述就是关于前端实现页面扫码识别组件使用基本功能的基本介绍和使用方法。