You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
79 lines
1.3 KiB
79 lines
1.3 KiB
10 months ago
|
<template>
|
||
|
|
<div>
|
||
|
|
<p class="decode-result">Last result: <b>{{ result }}</b></p>
|
||
|
|
|
||
|
|
|
||
|
|
<qrcode-stream :camera="camera" @decode="onDecode" @init="onInit">
|
||
|
|
<div v-show="showScanConfirmation" class="scan-confirmation">
|
||
|
|
<img :src="$withBase('/checkmark.svg')" alt="Checkmark" width="128px" />
|
||
|
|
</div>
|
||
|
|
</qrcode-stream>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import { QrcodeStream } from '../../../../src'
|
||
|
|
|
||
|
|
export default {
|
||
|
|
|
||
|
|
components: { QrcodeStream },
|
||
|
|
|
||
|
|
data () {
|
||
|
|
return {
|
||
|
|
camera: 'auto',
|
||
|
|
result: null,
|
||
|
|
showScanConfirmation: false
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
methods: {
|
||
|
|
|
||
|
|
async onInit (promise) {
|
||
|
|
try {
|
||
|
|
await promise
|
||
|
|
} catch (e) {
|
||
|
|
console.error(e)
|
||
|
|
} finally {
|
||
|
|
this.showScanConfirmation = this.camera === "off"
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
async onDecode (content) {
|
||
|
|
this.result = content
|
||
|
|
|
||
|
|
this.pause()
|
||
|
|
await this.timeout(500)
|
||
|
|
this.unpause()
|
||
|
|
},
|
||
|
|
|
||
|
|
unpause () {
|
||
|
|
this.camera = 'auto'
|
||
|
|
},
|
||
|
|
|
||
|
|
pause () {
|
||
|
|
this.camera = 'off'
|
||
|
|
},
|
||
|
|
|
||
|
|
timeout (ms) {
|
||
|
|
return new Promise(resolve => {
|
||
|
|
window.setTimeout(resolve, ms)
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.scan-confirmation {
|
||
|
|
position: absolute;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
|
||
|
|
background-color: rgba(255, 255, 255, .8);
|
||
|
|
|
||
|
|
display: flex;
|
||
|
|
flex-flow: row nowrap;
|
||
|
|
justify-content: center;
|
||
|
|
}
|
||
|
|
</style>
|