<template>
|
<div class="qrcode">
|
<div id="reader"></div>
|
<div class="tipText">将二维码置于此区域</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) {
|
console.log("Html5Qrcode", devices);
|
this.html5QrCode = new Html5Qrcode("reader");
|
this.start();
|
}
|
})
|
.catch((err) => {
|
// handle err
|
console.log(err);
|
this.html5QrCode = new Html5Qrcode("reader");
|
this.error = "ERROR: 您需要授予相机访问权限";
|
this.$emit("err", this.error);
|
});
|
},
|
start() {
|
//environment后置 user前置
|
this.html5QrCode
|
.start(
|
{ facingMode: "environment" },
|
{
|
fps: 10,
|
qrbox: { width: 250, height: 250 },
|
},
|
(decodedText, decodedResult) => {
|
console.log("xxxxxxxxx扫描到了结果", 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%);
|
}
|
|
.tipText {
|
position: absolute;
|
left: 50%;
|
top: calc(50% + 165px);
|
transform: translate(-50%, -50%);
|
width: 100%;
|
height: 20px;
|
color: white;
|
font-size: 15px;
|
z-index: 999;
|
text-align: center;
|
}
|
</style>
|
