本文使用了HTML5+API Reference (参考地址:https://www.html5plus.org/doc/zh_cn/barcode.html#plus.barcode.getBarcodeById)
代码示例
new Vue({
el: "#list",
data: {
text: '',
barcode: null,
},
methods: {
//关闭扫码
closeBarcode() {
this.barcode.close();
this.barcode = null;
},
//扫码识别错误事件
one rror(error) {
var self = this;
mui.alert("识别二维码异常,请确认后重试", "温馨提示", function () {
self.closeBarcode();
});
},
//扫码成功事件 type 当前扫描条码类型数值,二维码为0 code 扫描结果
onmarked(type, code) {
var self = this;
self.text= code;
self.closeBarcode();
},
// 创建Barcode扫码控件
createBarcode() {
var self = this;
if (!self.barcode) {
self.barcode = plus.barcode.create('barcode', [plus.barcode.QR], {
top: '80px',//本来是0px 占用整个页面,但是没有关闭按钮,所以往下调整80像素,在html页面写了一个关闭按钮,调用关闭扫码事件
left: '0px',
width: '100%',
height: '100%',//默认100%
position: 'static',
frameColor: '#33d5ac',//扫码框颜色
scanbarColor: '#33d5ac',//扫码动画颜色
});
plus.webview.currentWebview().append(self.barcode);
}
self.barcode.start();
//回调函数
self.barcode.onmarked = self.onmarked;
self.barcode.onerror = self.onerror;
},
},
}
})
该方法没有关闭或者返回按钮
我在页面写了一层遮罩 ,加了一个关闭按钮
<div v-if="barcode!=null" class="mui-backdrop" style="z-index: 9999; background-color: #000;">
<span class="close-scan mui-icon mui-icon-closeempty" v-on:click="closeBarcode"></span>
</div>
标签:扫码,self,barcode,H5,二维码,plus,关闭 From: https://www.cnblogs.com/myWBlogs/p/17517397.html