vue-qrcode-reader 实现直接扫码和相册扫码
此方法可以在PC端调试,但是需要设置https:true (vue.config.js中)
但是vue-qrcode-reader只可以支持二维码扫描,对于条形码没有反应,应该是不支持,从实际扫描效果来看确实如此。
<template><div><p class="error">{{ error }}</p><!--错误信息--><van-cell-group inset><van-cellv-if='error.length > 0'centertitle="错误信息"value-class="error-style":value="error"></van-cell><van-cellv-if="!isDingDing"centertitle="扫码打卡-开启摄像头"><template #default><van-switch v-model="openCamera"></van-switch></template></van-cell><van-cellv-if="openCamera"centertitle="翻转摄像头"><template #default><van-switch v-model="camera" active-value="front" inactive-value="rear" inactive-color="green"/></template></van-cell><van-cell title="查看打卡记录" is-link to="/clockInfo" /></van-cell-group><p class="decode-result">扫描结果:<b>{{ result }}</b></p><!-- <p class="decode-result">--><!-- 扫描结果:--><!-- <b>{{ result }}</b>--><!-- </p>--><!--扫描结果--><van-divider></van-divider><qrcode-stream @decode="onDecode" @init="onInit" style="height: 300px;width: 300px;"><div><div class="qr-scanner"><div class="box"><div class="line"></div><div class="angle"></div></div></div></div></qrcode-stream><van-cell-group inset><van-fieldv-if="result.length>0"v-model="result"rows="1"autosizelabel="扫码结果"type="textarea"readonlyplaceholder="扫码结果"/></van-cell-group><div style="height: 300px;width: 300px;margin: auto;padding-top: 20px"><qrcode-stream v-if="!isDingDing && openCamera" :camera="camera" @decode="onDecode" @init="onInit"><div><div class="qr-scanner"><div class="box"><div class="line"></div><div class="angle"></div></div></div></div></qrcode-stream></div></div>
</template><script>
import { QrcodeStream } from 'vue-qrcode-reader'
import {toOrOffCheck} from '@/api/employeeAttend'
import bus from '@/utils/bus'
export default {name: "clockIn",// 要注册的组件components: {QrcodeStream},// 父传子 数据传递props: {},// 定义属性data() {return {userLoginInfo: {},camera: 'rear',isDingDing: false,openCamera: false,result: '', // 扫码结果信息error: '' // 错误信息}},// 计算属性,类似于过滤器,对绑定到view的数据进行处理computed: {},// 监听数据watch: {},// 在模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成视图created() {this.userLoginInfo = this.$ls.get('userLoginInfo')try {dd.postMessage({ active: 'scan' })this.isDingDing = true}catch (error){this.isDingDing = falseconsole.log('非钉钉环境,模拟用户')}bus.$on('getDingDingScan',(msg) => {this.dingDingScan(msg)});},// 每次进入页面后调用activated() {},// 在模板渲染成html后调用,通常是初始化页面完成后,再对html的dom节点进行一些需要的操作。mounted() {// 仅在渲染整个视图之后运行的代码// this.$/nextTick(function () {})},// 定义函数methods: {onDecode(result) {alert(result)this.result = resultthis.$notify({ type: 'success', message: '扫码成功' })this.openCamera = false},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'}}},dingDingScan(data){console.log('1111111111111')console.log(data)if (!data || data===''){return}const that = thisconst scanObj = JSON.parse(data)this.result = dataswitch (scanObj.operation){case 'clock':{toOrOffCheck(null, Object.assign(scanObj.data, {employeeId: that.userLoginInfo.employeeId})).then(res => {that.$notify({ type: 'success', message: '打卡成功' })})break;}}}}
}
</script><style scoped>
.error-style{color: red;
}
.scan{border-color: #585858;position: fixed;top: 0;left: 0;
}
.qrcode-stream-camera{width: 100%;height: 100%;display: block;-o-object-fit: cover;object-fit: cover;position: absolute;top: 0%;left: 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);}
}
</style>
vue-qrcode-reader 实现直接扫码和相册扫码相关推荐
- vue前端生成二维码,实现扫码下载功能
vue前端生成二维码,实现扫码下载功能 首先需要安装一个插件 npm install --save qrcodejs2 然后在需要的页面引入插件,最后使用 <template><di ...
- Laravel6.0 + vue.js + elementUI + 微信小程序 实现沃尔玛扫码购
本次项目使用 Laravel6.0 + vue.js + elementUI + 微信小程序 实现沃尔玛扫码购 项目设计-接口 本次项目所有接口使用 laravel 框架实现. 项目设计-后台 后台开 ...
- vue app扫PC端二维码登录
通过接口获取二维码唯一标识,例如:qrcodeId 通过 qrcodejs2插件生成 二维码(二维码内容就是 qrcodeId,具体根据APP 需要) 循环调用接口,查看扫码状态(app是否扫码确认登 ...
- H5实现扫码读取二维码条形码功能(二维码+条形码)
本文主要介绍二维码实现的原理 1.使用插件 npm install @zxing/library 2.主要用到 BrowserMultiFormatReader 这个构造函数,用于打开摄像头 impo ...
- 使用前端QrCode.js实现根据输入内容生成二维码,并提供二维码下载功能(已使用在交付项目中)
前端QrCode 根据输入内容生成二维码,并提供二维码下载功能 简介:这是一个使用前端QrCode自动生成二维码并下载二维码图片的项目. 项目背景:在某个项目的交付阶段,客户提出需要一个可手动生成二维 ...
- 二维码和app扫码下载
文章目录 二维码基本原理 二级码生成 在线二维码生成 java代码生成二维码 前端二维码生成 app扫码下载 二维码基本原理 参考: https://cli.im/help/48235 二维条码是指在 ...
- VC++利用笔记本自带摄像头扫二维码功能(附源码demo)
VC++开发常用功能一系列文章 (欢迎订阅,持续更新...) 第8章:VC++利用笔记本自带摄像头扫二维码功能(附源码demo) 源代码demo已上传到百度网盘:永久生效 ,代码实现了打开笔记本 ...
- wechat-0050,微信公众号,带参数的二维码获取与扫码事件推送
demo:https://github.com/wenrongyao/wechat-demo 摘要:这篇帖子讲述如何获取带参数的二维码,以及扫码带参数的二维码后的事件接收. 微信开发者文档:https ...
- 钉钉开发平台 —H5微应用-- 扫条形码、二维码 api 示例
扫条形码.二维码 使用说明 客户端 Android iOS PC 支持说明 支持 支持 不支持 dd.biz.util.scan({type: String , // type 为 all.qrCod ...
最新文章
- dedecms vdimgck.php,织梦dedecms后台验证码图片不显示解决方案
- hive ALLOW_UNQUOTED_CONTROL_CHARS
- 《解剖PetShop》系列之二
- 挖矿为什么要用显卡_Eth2拉开序幕,为何显卡大户却在加码挖矿?
- mailto 附带附件_为什么附带项目如此重要
- Oracle 等待事件(Wait Event):Sync ASM rebalance 解析
- Spring Boot基础
- HipHop PHP HHVM资料收集
- 损失函数理解汇总,结合 PyTorch1.7 和 TensorFlow2
- 我只能说,Spring Data REST真的很燥辣
- 【数据挖掘】数据挖掘总结 ( 模式挖掘 | Apriori 算法 | 支持度 | 置信度 | 关联规则 ) ★★
- 《重构》笔记---坏代码的味道与处理
- 现代通用计算机析雏形,计算机作业一、选择题 1.______B______是现代通用计算机的雏形。 A. 宾州大学于1946年2月研制成功的E...
- js入门篇--制作简单闪烁图片
- Python-Django毕业设计交通违章举报平台(程序+Lw)
- The First :使用Anaconda+pycharm学习图像处理
- 图解|网络究竟是如何运作的?
- vue和微信小程序的基本使用区别
- 数据库课程设计——火车票售票系统
- DM达梦执行计划和ET的查看使用
热门文章
- MVC-Controllers 数据验证
- 数据链路层 功能 封装成帧 透明传输 字符计数法 字符填充法 零比特填充法 违规编码法 传输中的差错 差错控制 冗余编码 奇偶校验码 CRC循环冗余码 检错过程 细解 图解 通俗易懂
- 线性代数中的余子式、代数余子式、行列式、伴随矩阵、逆矩阵
- 147所双一流高校, 博士生毕业发表论文要求汇总
- 什么是前端、后端、数据库?
- 硬件之路——校招面试避雷Tips
- SpringCloud Gateway——请求转发源码分析
- 人力成本 HR cost
- 用友固定资产对账提示不平衡
- 1024 这天我成功拿到舞蹈厂 offer, 涨薪 50%