VUE html5-qrcode H5扫一扫功能-Toy模板网

这篇具有很好参考价值的文章主要介绍了VUE html5-qrcode H5扫一扫功能。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

官方文档 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>

引用组件页面文章来源地址https://www.toymoban.com/news/detail-579994.html

<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扫一扫功能的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！