Shulou(Shulou.com)06/02 Report--

This article mainly shows you "how to achieve QR code scanning function through vue", the content is easy to understand, clear, hope to help you solve your doubts, the following let Xiaobian lead you to study and learn "how to achieve QR code scanning function through vue" this article.

Prompt

This plug-in can only be accessed under the https protocol, the http protocol does not work well, it is best to use vue2,vue3 easy to report errors!

Description

The function of scanning code is realized by vue.

Reference document: vue-qrcode-reader go to the official website-> official documentation

Effect display

Implementation step: step 1 (install the plug-in)

Npm install-save vue-qrcode-reader

Step 2 (create components)

Because it may be used by multiple pages, it becomes a component.

(1) create a qrcode.vue in components under src

(2) Code implementation

/ / qrcode.vue put the QR code / bar code in the box That is, automatically scan my QR code / / download plug-in / / cnpm install-- save vue-qrcode-reader// introduces import {QrcodeStream} from 'vue-qrcode-reader' Export default {/ / register components: {QrcodeStream}, data () {return {result:'', / / scan result information error:'', / / error message / / 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: you need to grant camera access';} else if (error.name = 'NotFoundError') {this.error =' ERROR: there is no camera on this device' } else if (error.name = = 'NotSupportedError') {this.error =' ERROR: required security context (HTTPS, local host)';} else if (error.name = = 'NotReadableError') {this.error =' ERROR: camera occupied' } else if (error.name = = 'OverconstrainedError') {this.error =' ERROR: inappropriate camera installation';} else if (error.name = 'StreamApiNotSupportedError') {this.error =' ERROR: streaming API' is not supported in this browser }, / / Open the camera / / openCamera () {/ / this.camera = 'rear' / / this.qrcode = true / / this.show = true / /} / / turn off the camera / / closeCamera () {/ / this.camera = 'off' / / this.qrcode = false / / this.show = false / /} / / Open the flashlight / / openFlash () {/ / switch (this.torchActive) {/ / case true: / / this.torchActive = false / / break / / case false: / / this.torchActive = true / / break / /} / /} / / camera reverse / / 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 /} / /} } .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 3remt; background-position:-1rem-1remr; 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; 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% {transform: translateY (0);}

(3) introduce the code on the pages that need to be scanned

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

(4) Registration component

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

(5) use components

/ / render where you need to show the QR code / / if the above doesn't work, you can use the following article entitled "how to scan the QR code through vue". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.