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}}
});

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

Vue3 扫描二维码相关推荐

关于Unity调用摄像头扫描二维码与生成二维码的实现方法
1.常用的生成二维码网址 https://cli.im/ 2.上官网下载二维码插件 http://zxingnet.codeplex.com/ 3.将下载的插件中zxing.unity.dll文件放入 ...
Android扫描二维码实现登录网页
工程代码:ScanQRcode.zip ------------------------------------------------------------------ 1. 扫描二维码登录的实现 ...
转【微信小程序四】二维码生成／扫描二维码
原文:https://blog.csdn.net/xbw12138/article/details/75213274 前端二维码生成二维码要求:每分钟刷新一次,模拟了个鸡肋,添加了个按分钟显示 ...
解决android扫描二维码时，用户禁止权限报错问题
当我用ZBarDecoder.jar写了一个扫描二维码的程序,确实实现了扫描功能.组长说如果用户禁止调用摄像头,那程序也不能崩溃.结果我一运行就崩溃了.在网上自己找了找,可以这样解决. try { m ...
IOS7实现扫描二维码
简介: 这里介绍在IOS7 中使用AVFoundation扫描二维码在 iOS7 以前,在iOS中实现二维码和条形码扫描,我们所知的有,两大开源组件ZBar与ZXing. 这两大组件我们都有用过,这 ...
扫描二维码读取文档_使用深度学习读取和分类扫描的文档
扫描二维码读取文档 To many people's dismay, there is still a giant wealth of paper documents floating out the ...
基于ZXing Android实现生成二维码图片和相机扫描二维码图片即时解码的功能
NextQRCode ZXing开源库的精简版 **基于ZXing Android实现生成二维码图片和相机扫描二维码图片即时解码的功能原文博客附源码下载地址** 与原ZXingMini项目对比 N ...
Teams App 扫描二维码
上篇文章我们讲了如何在app的manifest里设置设备的权限,这篇文章我们来实际操作开发一个可以扫描二维码的teams app. 首先,我们先到app studio里,创建一个teams app,然 ...
Android之ZXing扫描二维码以及生成二维码
Android之ZXing扫描二维码以及生成二维码 ZXIng项目地址:ZXing地址项目结构扫描二维码:使用 CaptureActivity类项目代码: import android.cont ...

Vue3 扫描二维码

1. 安装vue3-qr-reader插件

2.导入并注册QR解码器

3.代码示例

Vue3 扫描二维码相关推荐

最新文章

热门文章