Vue 移动端项目调用扫一扫功能(可条形码)
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
前言: 项目需求扫描机器条形码,获取编号进行搜索,刚开始获取返回值不完整,后来发现要设置一下filter
提示plus方法要进行真机测试
如果plus没有找到的话,可以用原生监听。
document.addEventListener(“plusready”,function(){})
图片:
代码:
<template>
<div class="scan">
<!-- 我topTitle是封装的全局头部返回 根据自己条件进行休整 -->
<topTitle>扫一扫</topTitle>
<div id="bcid">
<div style="height:40%"></div>
<p class="item">...载入中...</p>
</div>
</div>
</template>
<script>
let scan = null;
export default {
data() {
return {
};
},
mounted() {
this.startRecognize();
setTimeout(() => {
this.startScan();
}, 500);
},
methods: {
//创建扫描控件
startRecognize() {
let that = this;
if (!window.plus) return;
//filter 扫描类型
var filter = [
plus.barcode.CODE128,
plus.barcode.EAN13,
plus.barcode.EAN8,
plus.barcode.QR,
];
scan = new plus.barcode.Barcode("bcid", filter);
scan.onmarked = onmarked;
function onmarked(type, result, file) {
switch (type) {
case plus.barcode.QR:
type = "QR";
break;
case plus.barcode.EAN13:
type = "EAN13";
break;
case plus.barcode.EAN8:
type = "EAN8";
break;
case plus.barcode.CODE128:
type = "EAN8";
break;
default:
type = "其它" + type;
break;
}
that.$toast(result); //我这里是封装的vant 需要根据自己情况进行修改
that.closeScan();
}
},
// 关闭控件a
closeScan() {
if (!window.plus) return;
scan.close();
},
startScan() {
if (!window.plus) return;
scan.start();
},
// 关闭扫描
cancelScan() {
if (!window.plus) return;
scan.cancel();
},
},
destroyed() {
this.cancelScan();
this.closeScan();
},
};
</script>
<style lang="scss">
.scan {
width: 100%;
height: 100vh;
background-color: #ccc;
}
#bcid {
width: 100%;
position: absolute;
left: 0;
right: 0;
top: 1.226667rem;
bottom: 0;
text-align: center;
color: #fff;
background: #ccc;
}
.item {
font-size: 0.4rem;
}
</style>
测试条形码也特别完整👍
GitHub 加速计划 / vu / vue
207.54 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:2 个月前 )
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 4 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
更多推荐
已为社区贡献1条内容
所有评论(0)