Vue3 扫描二维码

记录下vue3的扫描二维码功能开发（摄像头扫描，二维码上传文件扫描）

1. 安装vue3-qr-reader插件

 npm i --save vue3-qr-reader
 或
 yarn add vue3-qr-reader

2.导入并注册QR解码器

全局导入：

// globally
import { createApp } from 'vue';
import App from './App.vue'
import QrReader from 'vue3-qr-reader';
const app = createApp(App);
app.use(QrReader);
app.mount('#app')

// Locally
import { QrStream, QrCapture, QrDropzone } from 'vue3-qr-reader';
export default {
  components: {
    QrStream,
    QrCapture,
    QrDropzone
  },
};

单组件导入：

import { QrStream, QrCapture, QrDropzone } from 'vue3-qr-reader'

export default defineComponent({
  components: { QrStream,QrCapture,QrDropzone },
  name: 'QrStreamExample'
})

二者选一即可

3.代码示例

单组件引入代码示例：

<template>
 
    <div class="content">
	   <qr-stream @decode="onDecode" class="mb"> //摄像头扫码识别
	    <div style="color: red;" class="frame"></div>
	  </qr-stream>
	  // <qr-capture @decode="onDecode" class="mb"> //图片上传二维码识别
	  //  <div style="color: red;" class="frame"></div>
	  //</qr-capture>
	 
       <span>将二维码放入框内，即可自动扫描</span>
        {{data}}
    </div>
 
</template>
<script>
import { defineComponent, reactive, toRefs } from 'vue'
import { QrStream, QrCapture, QrDropzone } from 'vue3-qr-reader'

export default defineComponent({
  components: { QrStream,QrCapture,QrDropzone },
  name: 'QrStreamExample',
  setup() {
    const state = reactive({
      data: null
    })
    function onDecode(data) {
      state.data = data
    }
    return {
      ...toRefs(state),
      onDecode
    }
  }
})
</script>

全局引入示例：

<qr-stream @decode="onDecode" class="mb">  //扫码识别
    <div style="color: red;" class="frame"></div> //扫码识别框的颜色、样式
  </qr-stream>
//<qr-capture @decode="onDecode" class="mb"></qr-capture> //上传图片二维码识别
<div class="result">
  Result: {{data}}
</div>
export default defineComponent({
  name: 'QrCaptureExample',
  components: {
    QrCapture
  },
  setup() {
    const state = reactive({
      data: null
    })
    function onDecode(data) {
      state.data = data
    }
    return {
      ...toRefs(state),
      onDecode
    }
  }
});

大致用的到的就这两种，扫码和图片二维码识别 ，具体跟各位功能组合。