Vue-cli4 唤醒摄像头扫描二维码

<template> <div class="scan"> <div id="bcid"> <div id="head"> <van-row> <van-col span="4"> <van-icon name="clear" @click="closeScanBtn" size="2em" /> </van-col> <van-col span="8"></van-col> <van-col span="8"></van-col> </van-row> </div> <div style="height:40%"></div> <p class="tip">...载入中...</p> </div> </div> </template> <script type='text/ecmascript-6'> let scan = null; import Vue from "vue"; import { Col, Row } from "vant"; import { Icon } from "vant"; Vue.use(Icon); Vue.use(Col); Vue.use(Row); export default { data() { return { codeUrl: "" }; }, destroyed() {}, mounted() { this.startRecognize(); this.startScan(); }, methods: { //创建扫描控件 startRecognize() { let that = this; if (!window.plus) return; scan = new window.plus.barcode.Barcode("bcid"); scan.onmarked = onmarked; // eslint-disable-next-line no-unused-vars function onmarked(type, result, file) { switch (type) { case window.plus.barcode.QR: type = "QR"; break; case window.plus.barcode.EAN13: type = "EAN13"; break; case window.plus.barcode.EAN8: type = "EAN8"; break; default: type = "其它" + type; break; } result = result.replace(/\n/g, ""); that.codeUrl = result; that.closeScan(); } }, //开始扫描 startScan() { if (!window.plus) return; scan.start(); }, //关闭扫描 cancelScan() { if (!window.plus) return; scan.cancel(); }, //关闭条码识别控件 closeScan() { if (!window.plus) return; scan.close(); this.$store.state.GetdeviceSn = 0; var reg = /^[A-Z][0-9]{12,15}$/; if (!reg.test(this.codeUrl)) { alert("无效的机器编号"); this.$router.push({ path: "/NewD/" + this.$store.state.deviceSn }); } else { this.$router.push({ path: "/NewD/" + this.codeUrl }); } }, closeScanBtn() { if (!window.plus) return; scan.close(); this.$store.state.GetdeviceSn = 0; this.$router.push({ path: "/NewD/" + this.$store.state.deviceSn }); } } }; </script> <style lang="less"> .scan { height: 100%; background-color: #ccc; #bcid { width: 100%; height: 45rem; left: 0; right: 0; top: 0rem; bottom: 0rem; text-align: center; color: #fff; z-index: -1; background: #ccc; } #head { position: absolute; left: 0rem; height: 2rem; top: 2rem; line-height: 0rem; z-index: 1; width: 100%; } } </style>

效果如下


__EOF__

本文作者可乐加冰
本文链接https://www.cnblogs.com/zt199510/p/12760334.html
关于博主:评论和私信会在第一时间回复。或者直接私信我。
版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!
声援博主:如果您觉得文章对您有帮助,可以点击文章右下角推荐一下。您的鼓励是博主的最大动力!
posted @   可乐_加冰  阅读(2193)  评论(3编辑  收藏  举报
编辑推荐:
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
阅读排行:
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
点击右上角即可分享
微信分享提示