赞
踩
参考链接:
需要在 https 协议下才可以调用相机,实现扫码。
可以通过配置 vue.config.js 中的 devServer:{https:true}
或 前端使用Nuxt框架,配置本地https访问 配置本地证书
npm i vue-qrcode-reader --save
<template> <div class="container"> <!-- 扫描中心的盒子 --> <qrcode-stream class="qrcode" @decode="onDecode" @init="onInit"> <div class="center"> <span class="border"></span> <span class="border"></span> <span class="border"></span> <span class="border"></span> <div class="animate"></div> </div> </qrcode-stream> </div> </template> <script> import { QrcodeStream } from 'vue-qrcode-reader' export default { components: { QrcodeStream}, data() { return {} }, methods: { onDecode(result) { window.location.href = result }, async onInit(promise) { try { await promise } catch (error) { if (error.name === 'NotAllowedError') { alert('ERROR: 您需要授予相机访问权限') } else if (error.name === 'NotFoundError') { alert('ERROR: 这个设备上没有摄像头') } else if (error.name === 'NotSupportedError') { alert('ERROR: 所需的安全上下文(HTTPS、本地主机)') } else if (error.name === 'NotReadableError') { alert('ERROR: 相机被占用') } else if (error.name === 'OverconstrainedError') { alert('ERROR: 安装摄像头不合适') } else if (error.name === 'StreamApiNotSupportedError') { alert('ERROR: 此浏览器不支持流API') } } } } } </script> <style lang="less" scoped> .container { height: 100%; overflow: hidden; .qrcode { height: 100%; background-color: rgba(0, 0, 0, 0.3); .center { width: 200px; height: 200px; position: fixed; background-color: rgba(255, 255, 255, 0.5); top: 50%; left: 50%; transform: translate(-50%, -50%); } .animate { width: 150px; background-color: #41b482; height: 2px; margin: 0 auto; animation: animate 3s infinite; } @keyframes animate { 0% { margin-top: 50px; } 100% { margin-top: 150px; } } .border { position: absolute; } .border:nth-child(1) { top: 0; left: 0; border-top: 2px solid #41b482; border-left: 2px solid #41b482; width: 10px; height: 10px; } .border:nth-child(2) { top: 0; right: 0; border-top: 2px solid #41b482; border-right: 2px solid #41b482; width: 10px; height: 10px; } .border:nth-child(3) { bottom: 0; left: 0; border-bottom: 2px solid #41b482; border-left: 2px solid #41b482; width: 10px; height: 10px; } .border:nth-child(4) { bottom: 0; right: 0; border-bottom: 2px solid #41b482; border-right: 2px solid #41b482; width: 10px; height: 10px; } } } </style>
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。