VUE html5-qrcode实现H5扫一扫功能实例
作者：改bug的101天
这篇文章主要给大家介绍了关于VUE html5-qrcode实现H5扫一扫功能的相关资料,html5-qrcode是轻量级和跨平台的QR码和条形码扫码的JS库,集成二维码、条形码和其他一些类型的代码扫描功能,需要的朋友可以参考下
官方文档 html5-qrcode
安装 npm i html5-qrcode
1、新建一个组件
<div class="qrcode"> <div id="reader"></div> </div>
//样式
.qrcode{
position: relative;
height: 100%;
width: 100%;
background: rgba($color: #000000, $alpha: 0.48);
}
#reader{
top: 50%;
left: 0;
transform: translateY(-50%);
}2、引入
import { Html5Qrcode } from "html5-qrcode";3、获取摄像权限在created调用
getCameras() {
Html5Qrcode.getCameras()
.then((devices) => {
if (devices && devices.length) {
this.html5QrCode = new Html5Qrcode("reader");
this.start();//扫码
}
})
.catch((err) => {
// handle err
this.html5QrCode = new Html5Qrcode("reader");
this.error = "ERROR: 您需要授予相机访问权限"
this.$emit("err",this.error)
});
},4、获取扫码内容
start() {
//environment后置 user前置
this.html5QrCode
.start(
{facingMode: "environment" },
{
fps: 2,//500毫秒扫描一次
qrbox: { width: 250, height: 250 },
},
(decodedText, decodedResult) => {
this.$emit("ok",decodedText)
}
)
.catch((err) => {
console.log(`Unable to start scanning, error: ${err}`);
});
},5、必须在销毁页面前关闭扫码功能否则会报错 could not start video source
//销毁前调用 beforeDestroy() { this.stop(); } //关闭扫码 stop() { this.html5QrCode.stop().then((ignore) => { // QR Code scanning is stopped. console.log("QR Code scanning stopped."); }) .catch((err) => { // Stop failed, handle it. console.log("Unable to stop scanning."); }); },
6、在扫码页面引用组件
<BarScan ref="qrcode" @ok="getResult" @err="geterror" ></BarScan>
getResult(e){
//e:扫码内容
}
geterror(e){
//e:报错内容
}组件完整代码
<template>
<div class="qrcode">
<div id="reader"></div>
</div>
</template>
<script>
import { Html5Qrcode } from "html5-qrcode";
export default {
created() {
this.getCameras()
},
beforeDestroy() {
this.stop();
},
methods:{
getCameras() {
Html5Qrcode.getCameras()
.then((devices) => {
if (devices && devices.length) {
this.html5QrCode = new Html5Qrcode("reader");
this.start();
}
})
.catch((err) => {
// handle err
this.html5QrCode = new Html5Qrcode("reader");
this.error = "ERROR: 您需要授予相机访问权限"
this.$emit("err",this.error)
});
},
start() {
//environment后置 user前置
this.html5QrCode
.start(
{facingMode: "environment" },
{
fps: 2,
qrbox: { width: 250, height: 250 },
},
(decodedText, decodedResult) => {
this.$emit("ok",decodedText)
}
)
.catch((err) => {
this.$emit("err",err)
});
},
stop() {
this.html5QrCode.stop().then((ignore) => {
// QR Code scanning is stopped.
console.log("QR Code scanning stopped.");
})
.catch((err) => {
// Stop failed, handle it.
console.log("Unable to stop scanning.");
});
},
}
}
</script>
<style lang="scss" scoped>
.qrcode{
position: relative;
height: 100%;
width: 100%;
background: rgba($color: #000000, $alpha: 0.48);
}
#reader{
top: 50%;
left: 0;
transform: translateY(-50%);
}
</style>引用组件页面
<BarScan ref="qrcode" @ok="getResult" @err="geterror" ></BarScan>
import BarScan from '@/components/qrcode.vue'
var _self;
export default {
components:{
BarScan
},
methods:{
getResult(result){
this.result=result;
},
geterror(e){
this.$toast(e)
},}
}总结
到此这篇关于VUE html5-qrcode实现H5扫一扫功能的文章就介绍到这了,更多相关VUE html5-qrcode H5扫一扫内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！