<template>
|
<div class="qrcode">
|
<div id="reader"></div>
|
<div class="tipText">将二维码置于此区域</div>
|
</div>
|
</template>
|
|
<script>
|
import { Html5Qrcode } from "html5-qrcode";
|
export default {
|
name: 'Html5Qrcode',
|
data () {
|
return {
|
html5QrCode: null
|
}
|
},
|
mounted () {
|
this.$nextTick(() => {
|
this.getCameras()
|
})
|
},
|
|
beforeDestroy() {
|
this.stop();
|
},
|
methods: {
|
getCameras() {
|
Html5Qrcode.getCameras()
|
.then((devices) => {
|
if (devices && devices.length) {
|
console.log("Html5Qrcode", devices);
|
this.html5QrCode = new Html5Qrcode("reader");
|
// console.log(11111111)
|
// console.log(11111111)
|
// console.log(11111111)
|
// console.log(11111111)
|
// console.log(11111111)
|
// console.log(11111111)
|
// console.log(this.html5QrCode)
|
// console.log(JSON.stringify(this.html5QrCode))
|
// console.log(11111111)
|
// console.log(11111111)
|
// console.log(11111111)
|
// console.log(11111111)
|
// console.log(11111111)
|
// console.log(11111111)
|
this.start();
|
}
|
})
|
.catch((err) => {
|
// handle err
|
console.log(err);
|
console.log(JSON.stringify(err));
|
this.html5QrCode = new Html5Qrcode("reader");
|
let error = "ERROR: 没有授权啊！您需要授予相机访问权限~";
|
this.$emit("err", error);
|
});
|
},
|
start() {
|
//environment后置 user前置
|
this.html5QrCode
|
.start(
|
{ facingMode: "environment" },
|
{
|
fps: 30,
|
qrbox: { width: 250, height: 250 },
|
},
|
(decodedText, decodedResult) => {
|
console.log("恭喜你~扫描到了结果", decodedText, decodedResult);
|
this.$emit("ok", decodedText);
|
}
|
)
|
.catch((err) => {
|
console.log(JSON.stringify(err));
|
this.$emit("err", err);
|
});
|
},
|
stop() {
|
this.html5QrCode
|
.stop()
|
.then((ignore) => {
|
console.log(ignore)
|
// QR Code scanning is stopped.
|
console.log("QR Code scanning stopped.");
|
})
|
.catch((err) => {
|
console.log(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>
|
