提示

这个插件只能在https协议下才能访问，http协议不好使，最好用vue2,vue3容易报错！！！！！

描述

通过vue的方式，实现扫码功能

参考文档：vue-qrcode-reader去官网–>官方文档

效果展示

实现步骤：

步骤一（安装插件）

npm install --save vue-qrcode-reader

步骤二（创建组件）

因为可能多个页面都会用到，所以弄成了组件
（1）在src下面的components创建qrcode.vue
（2）代码实现

// qrcode.vue
<template><div><!-- <p class="error">{{ error }}</p> --><!--错误信息--><!-- <p class="decode-result">扫描结果:<b>{{ result }}</b></p> --><!--扫描结果--><!-- <p @click="openCamera">打开相机</p><div v-show="show" class="cameraMessage"><p @click="closeCamera">关闭相机</p><p @click="openFlash">打开手电筒</p><p @click="switchCamera">相机反转</p></div> --><qrcode-streamv-show="qrcode":camera="camera":torch="torchActive"@decode="onDecode"@init="onInit"><div><div class="qr-scanner"><div class="box"><div class="line"></div><div class="angle"></div></div><div class="txt">将二维码/条码放入框内，即自动扫描<div class="myQrcode">我的二维码</div></div></div></div></qrcode-stream></div>
</template><script>
// 下载插件
// cnpm install --save  vue-qrcode-reader// 引入
import { QrcodeStream } from 'vue-qrcode-reader';export default {// 注册components: { QrcodeStream },data() {return {result: '', // 扫码结果信息error: '', // 错误信息// show: false,// qrcode: false,qrcode: true,torchActive: false,camera: 'front',};},methods: {onDecode(result) {console.log(result);this.result = result;},async onInit(promise) {const { capabilities } = await promise;const TORCH_IS_SUPPORTED = !!capabilities.torch;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';}}},// 打开相机// openCamera() {//     this.camera = 'rear'//     this.qrcode = true//     this.show = true// },// 关闭相机// closeCamera() {//     this.camera = 'off'//     this.qrcode = false//     this.show = false// },// 打开手电筒// openFlash() {//     switch (this.torchActive) {//         case true://             this.torchActive = false//             break//         case false://             this.torchActive = true//             break//     }// },// 相机反转// switchCamera() {//     // console.log(this.camera);//     switch (this.camera) {//         case 'front'://             this.camera = 'rear'//             console.log(this.camera)//             break//         case 'rear'://             this.camera = 'front'//             console.log(this.camera)//             break//     }// }},
};
</script>
<style scoped>
.error {font-weight: bold;color: red;
}
.cameraMessage {width: 100%;height: 60px;
}
.qr-scanner {background-image: linear-gradient(0deg,transparent 24%,rgba(32, 255, 77, 0.1) 25%,rgba(32, 255, 77, 0.1) 26%,transparent 27%,transparent 74%,rgba(32, 255, 77, 0.1) 75%,rgba(32, 255, 77, 0.1) 76%,transparent 77%,transparent),linear-gradient(90deg,transparent 24%,rgba(32, 255, 77, 0.1) 25%,rgba(32, 255, 77, 0.1) 26%,transparent 27%,transparent 74%,rgba(32, 255, 77, 0.1) 75%,rgba(32, 255, 77, 0.1) 76%,transparent 77%,transparent);background-size: 3rem 3rem;background-position: -1rem -1rem;width: 100%;/* height: 100%; */height: 100vh;/* height: 288px; */position: relative;background-color: #1110;/* background-color: #111; */
}
/* .qrcode-stream-wrapper {display: flex;justify-content: center;align-items: center;margin-top: 82px;clear: both;
} */
/* .qrcode-stream-wrapper >>> .qrcode-stream-camera {width: 213px;height: 210px;clear: both;margin-top: 39px;
} */
.qr-scanner .box {width: 213px;height: 213px;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);overflow: hidden;border: 0.1rem solid rgba(0, 255, 51, 0.2);/* background: url('http://resource.beige.world/imgs/gongconghao.png') no-repeat center center; */
}
.qr-scanner .txt {width: 100%;height: 35px;line-height: 35px;font-size: 14px;text-align: center;/* color: #f9f9f9; */margin: 0 auto;position: absolute;top: 70%;left: 0;
}
.qr-scanner .myQrcode {text-align: center;color: #00ae10;
}
.qr-scanner .line {height: calc(100% - 2px);width: 100%;background: linear-gradient(180deg, rgba(0, 255, 51, 0) 43%, #00ff33 211%);border-bottom: 3px solid #00ff33;transform: translateY(-100%);animation: radar-beam 2s infinite alternate;animation-timing-function: cubic-bezier(0.53, 0, 0.43, 0.99);animation-delay: 1.4s;
}.qr-scanner .box:after,
.qr-scanner .box:before,
.qr-scanner .angle:after,
.qr-scanner .angle:before {content: '';display: block;position: absolute;width: 3vw;height: 3vw;border: 0.2rem solid transparent;
}.qr-scanner .box:after,
.qr-scanner .box:before {top: 0;border-top-color: #00ff33;
}.qr-scanner .angle:after,
.qr-scanner .angle:before {bottom: 0;border-bottom-color: #00ff33;
}.qr-scanner .box:before,
.qr-scanner .angle:before {left: 0;border-left-color: #00ff33;
}.qr-scanner .box:after,
.qr-scanner .angle:after {right: 0;border-right-color: #00ff33;
}@keyframes radar-beam {0% {transform: translateY(-100%);}100% {transform: translateY(0);}
}
</style>

（3）在需要扫码的页面引入

//
import qrcode from '@/components/qrcode.vue';

（4）注册组件

//
components: {'vue-qrcode': qrcode,},

（5）使用组件

// 在需要展示二维码的地方进行渲染
<vue-qrcode />
//如果上面这个不好使，可以用下面这个
<vue-qrcode></vue-qrcode>

vue实现二维码扫码功能相关推荐

vue实现二维码批量打印功能
vue实现二维码批量打印功能业务需求:客户需要给每个商品贴上二维码,为了更加高效的完成这项工作需要配合热敏打印机实现批量打印二维码的需求,因为是web项目后端会部署到服务器上,因此只能通过js的方式 ...
【Vue】Vue生成二维码 Vue把url地址生成二维码手机打开扫一扫手机端打开实战案例 vue生成二维码
代码 npm install qrcodejs2 --save 代码引入到项目中,不需要再main.js做处理,只需要在使用的vue页面中引入. 在页面中使用 <template>< ...
原生Vue实现二维码扫一扫，兼容PC、安卓、IOS
原生Vue实现二维码扫一扫通过使用 vue-qrcode-reader 进行实现,必须是 Https 或 Localhost 文章目录原生Vue实现二维码扫一扫 vue-qrcode-reader ...
基于MacOSX平台下的二维码扫码功能
基于MacOSX平台下的二维码扫码功能最近项目接受了一个需求,要在macOS的系统上实现一个二维码扫码的功能.通过多方面的学习,最终实现了要求,具体的实现步骤将会在下面展示. 核心功能模块实现途径 ...
如何实现安卓二维码扫码功能
使用这个库:https://github.com/jenly1314/ZXingLite 1.库的引入: allprojects {repositories {google()jcenter()mav ...
手机二维码扫码登录（Java源码及思路）
QRCodeLogin 二维码扫码登录:服务器端.网页端.移动端源码: 项目介绍一个二维码扫码登录的demo,能够完整的实现用户扫码登录的过程,源码地址. 项目一共包含三分源码:服务器端.网页端和移 ...
js调用微信利用二维码扫码登录
js调用微信利用二维码扫码登录准备工作网站应用微信登录是基于OAuth2.0协议标准构建的微信OAuth2.0授权登录系统. 在进行微信OAuth2.0授权登录接入之前,在微信开放平台注册开发者帐 ...
spring boot高性能实现二维码扫码登录(中)——Redis版
前言本打算用CountDownLatch来实现,但有个问题我没有考虑,就是当用户APP没有扫二维码的时候,线程会阻塞5分钟,这反而造成性能的下降.好吧,现在回归传统方式:前端ajax每隔1秒或2秒发 ...
python 全栈开发，Day128(创建二维码,扫码,创建玩具的基本属性)
python 全栈开发,Day128(创建二维码,扫码,创建玩具的基本属性) 昨日内容回顾 1.app播放音乐plus.audio.createPlayer(文件路径/URL)player.play( ...
二维码扫码登录是什么原理?
在日常生活中,二维码出现在很多场景,比如超市支付.系统登录.应用下载等等.了解二维码的原理,可以为技术人员在技术选型时提供新的思路.对于非技术人员呢,除了解惑,还可以引导他更好地辨别生活中遇到的各种二 ...

vue实现二维码扫码功能

提示

描述

效果展示

实现步骤：

步骤一（安装插件）

步骤二（创建组件）

vue实现二维码扫码功能相关推荐

最新文章

热门文章