<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>

效果如下

Vue-cli4 唤醒摄像头扫描二维码的更多相关文章

  1. h5端呼起摄像头扫描二维码并解析

    2016年6月29日补充: 最近做了一些与表单相关的项目,使用了h5的input控件,在使用过程中遇到了很多的坑.也包括与这篇文章相关的. 首先我们应该知道使用h5新提供的属性getUserMedia ...

  2. 使用vue做移动app时,调用摄像头扫描二维码

    现在前端技术发展飞快,前端都能做app了,那么项目中,也会遇到调用安卓手机基层的一些功能,比如调用摄像头,完成扫描二维码功能 下面我就为大家讲解一下,我在项目中调用这功能的过程. 首先我们需要一个中间 ...

  3. Win10 UWP开发:摄像头扫描二维码/一维码功能

    这个示例演示整合了Aran和微软的示例,无需修改即可运行. 支持识别,二维码/一维码,需要在包清单管理器勾选摄像头权限. 首先右键项目引用,打开Nuget包管理器搜索安装:ZXing.Net.Mobi ...

  4. 在WPF中开启摄像头扫描二维码(Media+Zxing)

    近两天项目中需要添加一个功能,是根据摄像头来读取二维码信息,然后根据读出来的信息来和数据库中进行对比显示数据. 选择技术Zxing.WPFMediaKit.基本的原理就是让WPFmediaKit来对摄 ...

  5. C# winfrom调用摄像头扫描二维码(完整版)

    前段时间看到一篇博客,是这个功能的,参考了那篇博客写了这个功能玩一玩,没有做商业用途.发现他的代码给的有些描述不清晰的,我就自己整理一下发出来记录一下. 参考博客链接:https://www.cnbl ...

  6. 打开手机摄像头扫描二维码或条形码全部操作(代码写的不好,请提出指教,共同进步,我只是一个Android的小白)

    (1)下载二维码的库源码 链接:http://pan.baidu.com/s/1pKQyw2n 密码:r5bv 下载完成后打开可以看到 libzxing 的文件夹,最后添加进 Android  Stu ...

  7. Ionic2学习笔记(10):扫描二维码

    作者:Grey 原文地址: http://www.cnblogs.com/greyzeng/p/5575843.html 时间:6/11/2016     说明: 在本文发表的时候(2016-06-1 ...

  8. uni-app开发经验分享十三:实现手机扫描二维码并跳转全过程

    最近使用 uni-app 开发 app ,需要实现一个调起手机摄像头扫描二维码功能,官网API文档给出了这样一个demo: // 允许从相机和相册扫码 uni.scanCode({ success: ...

  9. 用vue实现扫描二维码跳转页面功能

    怎么能用vue实现扫描二维码跳转页面功能 1. 安装依赖 npm install vue-qr --save 2. <template>   <div>     <div ...

随机推荐

  1. 『动善时』JMeter基础 — 54、JMeter聚合报告详解

    目录 1.聚合报告介绍 2.聚合报告界面详解 3.聚合报告中信息点说明 (1)百分位数的说明 (2)吞吐量说明 提示:聚合报告组件的使用和察看结果树组件的使用方式相同.本篇文章主要是详细的介绍一下聚合 ...

  2. 解决Windows Server 2012 在VMware ESXi中经常自动断网问题

    最近一些开发人员反映他们使用的 Windows server2012 R2 虚拟机过段时间就远程连接不上了,ping也不通(已关闭防火墙),我们登录ESXi发现,Windows Server 的网络图 ...

  3. [心得笔记]Java多线程中的内存模型

    一:现代计算机的高速缓存 在计算机组成原理中讲到,现代计算机为了匹配 计算机存储设备的读写速度 与  处理器运算速度,在CPU和内存设备之间加入了一个名为Cache的高速缓存设备来作为缓冲:将运算需要 ...

  4. Python之面向对象编程【小明跑步】、【置办家具】

    #!usr/bin/python 2 #encoding=utf-8 3 #-----------------小明跑步------------- 4 #1.小明体重75.0公斤 5 #2.小明每次跑步 ...

  5. npm run start失败&Node.js 查询指定端口运行情况及终止占用端口办法

    缘由: node.js项目中运行npm run start命令脚本报错,No such file or directory 最开始以为是命令脚本找不到所谓的执行路径,但后面发现不是,是package. ...

  6. MySQL | Xtrabackup 的简介

    Xtrabackup 简介 Xtrabackup是由Percona开发的一个开源软件,可实现对InnoDB的数据备份,支持在线热备份(备份时不影响数据读写). Xtrabackup有2款主要工具,xt ...

  7. 深入浅出 Jest 框架的实现原理

    English Version | 中文版 深入浅出 Jest 框架的实现原理 https://github.com/Wscats/jest-tutorial 什么是 Jest Jest 是 Face ...

  8. Git远程操作详解(clone、remote、fetch、pull、push)

    https://blog.csdn.net/u013374164/article/details/79091677 Git是目前最流行的版本管理系统,学会Git几乎成了开发者的必备技能. Git有很多 ...

  9. C语言:预定义的宏

    预定义宏就是已经预先定义好的宏,我们可以直接使用,无需再重新定义.ANSI C 规定了以下几个预定义宏,它们在各个编译器下都可以使用: __LINE__:表示当前源代码的行号: __FILE__:表示 ...

  10. lucene Hello World

    一个lucene创建索引和查找索引的样例: 创建索引: public class Indexer { private IndexWriter indexWriter; /** * 构造器实例化inde ...