vue 扫描二维码,获取二维码上的信息

时间:2019-10-17
本文章向大家介绍vue 扫描二维码,获取二维码上的信息,主要包括vue 扫描二维码,获取二维码上的信息使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

<template>
<div id="bcid">
</div>
</template>

<script lang="ts">
import {$, Component, getAjax, postAjax, putAjax, url, Vue, Watch,MessageBox} from '../../untis/common';

@Component({
components: {},
})
export default class login extends Vue {
mounted(){
this.startRecognize();
}
// 创建扫描控件
startRecognize() {
console.log(1);
//@ts-ignore
if (!window.plus) return;
//@ts-ignore
console.log('window.plus',window.plus);
//@ts-ignore
let scan = new plus.barcode.Barcode('bcid');
console.log('scan',scan);
scan.onmarked = onmarked;
function onmarked(type:any, result:any, file:any) {
switch (type) {
//@ts-ignore
case plus.barcode.QR:
type = 'QR'
break
//@ts-ignore
case plus.barcode.EAN13:
type = 'EAN13'
break
//@ts-ignore
case plus.barcode.EAN8:
type = 'EAN8'
break
default:
type = '其它' + type
break
}
// 获得code
result = result.replace(/\n/g, '')
console.log('result',result);
}
scan.start()
}

}
</script>

<style lang="less">
@import "../../assets/less/common.less";
#app{
height:100%;
}
#bcid {
width: 100%;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom:3rem;
text-align: center;
color: #fff;
background: #ccc;
}
</style>

原文地址:https://www.cnblogs.com/yixiaoyang-/p/11690309.html