Vue扫描二维码
原文:https://blog.csdn.net/zhangtian_tian/article/details/105226716
网页实现扫描二维码.
插件:npm install --save vue-qrcode-reader
Tips:需要在https
协议下才可以调用相机,实现扫码。
可以通过配置vue.config.js
中的devServer:{https:true}
代码:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<template> <div> <p class="error">{{ error }}</p> <!--错误信息--> <p class="decode-result"> 扫描结果: <b>{{ result }}</b> </p> <!--扫描结果--> <qrcode-stream @decode="onDecode" @init="onInit" /> </div> </template> <script> //下载插件 //cnpm install --save vue-qrcode-reader //引入 import { QrcodeStream } from 'vue-qrcode-reader'; export default { //注册 components: { QrcodeStream }, data() { return { result: '',//扫码结果信息 error: '',//错误信息 } }, methods: { onDecode(result) { alert(result); this.result = result }, async onInit(promise) { try { await promise } catch (error) { if (error.name === 'NotAllowedError') { this.error = "ERROR: 您需要授予相机访问权限" } else if (error.name === 'NotFoundError') { this.error = "ERROR: 这个设备上没有摄像头" } else if (error.name === 'NotSupportedError') { this.error = "ERROR: 所需的安全上下文(HTTPS、本地主机)" } else if (error.name === 'NotReadableError') { this.error = "ERROR: 相机被占用" } else if (error.name === 'OverconstrainedError') { this.error = "ERROR: 安装摄像头不合适" } else if (error.name === 'StreamApiNotSupportedError') { this.error = "ERROR: 此浏览器不支持流API" } } } } } </script> <style scoped> .error { font-weight: bold; color: red; } </style>