vue实现二维码扫码功能(带样式) vue实现二维码扫码功能(带样式

需求：
利用vue实现二维码扫描；
插件：
QRCodeReader；
插件下载
npm install --save vue-qrcode-reader
注意：
需要在https协议下才可以调用相机，实现扫码。
可以通过配置vue.config.js中的devServer:{https:true}
或参照前文章前端使用Nuxt框架，配置本地https访问配置本地证书

文章图片

.error {font-weight: bold; color: red; }/* * {margin: 0; padding: 0; }body {height: 700px; margin: 0; } */.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; position: relative; background-color: #1110; /* background-color: #111; */}.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 .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); }}

好，下面在一段代码vue项目中实现扫码功能
项目地址：https://github.com/wkl007/vue-scan-demo.git
项目主要是做的一个扫码的功能
核心代码为

...载入中...

.scan {height: 100%; #bcid {width: 100%; position: absolute; left: 0; right: 0; top: 0; bottom: 3rem; text-align: center; color: #fff; background: #ccc; }footer {position: absolute; left: 0; bottom: 1rem; height: 2rem; line-height: 2rem; z-index: 2; }}

【vue实现二维码扫码功能(带样式)】到此这篇关于vue实现扫码功能，带样式的文章就介绍到这了,更多相关vue扫码功能内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！