qrcode-reader-vue3 插件简述

qrcode-reader-vue3插件，允许您在不离开浏览器的情况下检测和解码二维码。

• 🎥 访问设备摄像头并持续扫描传入帧。QrcodeStream
• 🚮 渲染到一个空白区域，您可以在其中拖放要解码的图像。QrcodeDropZone
• 📂 是一个经典的文件上传字段，会立即扫描您选择的所有文件。QrcodeCapture

安装指令

npm install vue-qrcode-reader

H5扫码效果图

项目示例

扫描二维码组件

新建项目组件 QrScanner.vue

<template><div><QrStream:style="scannerStyle"@decode="handleDecode"@init="handleInit"@error="handleError"><template v-if="showCloseButton"><div class="qr-scanner-container"><button class="close-view" @click="closeScanner">X</button><div class="qr-scanner"><div class="box"><div class="line"></div><div class="angle"></div></div></div></div></template></QrStream></div>
</template><script setup>
import { ref, defineExpose } from 'vue'
import { QrStream } from 'vue3-qr-reader'const emit = defineEmits(['decode','close'])const scannerStyle = {position: 'fixed',top: 0,left: 0,width: '100vw',height: '100vh',zIndex: 9999,
}const showCloseButton = ref(false)const qrcodeData = ref(null)const handleDecode = (data) => {console.log('Decoded data:', data)emit('decode', data)qrcodeData.value = data}const closeScanner = () => {emit('close')
}const handleInit = async (promise) => {try {const { capabilities } = await promiseconsole.log('Camera capabilities:', capabilities)showCloseButton.value = true} catch (error) {handleError(error)}
}const handleError = (error) => {const errorMessages = {NotAllowedError: '您需要授予相机访问权限',NotFoundError: '这个设备上没有摄像头',NotSupportedError: '所需的安全上下文(HTTPS、本地主机)',NotReadableError: '相机被占用',OverconstrainedError: '安装摄像头不合适',StreamApiNotSupportedError: '此浏览器不支持流API',InsecureContextError: '仅允许在安全上下文中访问摄像机。使用HTTPS或本地主机，而不是HTTP。',}const message = errorMessages[error.name] || 'ERROR: 摄像头错误'message.error(message)console.error(message)
}defineExpose({ qrcodeData })
</script><style scoped lang="scss">
.qr-scanner-container {position: relative;width: 100%;height: 100%;.close-view {width: 30px;height: 30px;position: absolute;top: 20px;right: 20px;border-radius: 50%;background-color: #fff;color: #000;text-align: center;line-height: 30px;font-size: 20px;cursor: pointer;z-index: 1000000;}
}.qr-scanner {background-image: linear-gradient(0deg,transparent 24%,rgba(32, 255, 77, 0.1) 25%,rgba(32, 255, 77, 0.1) 26%,transparent 27%,transparent 74%,rgba(32, 255, 77, 0.1) 75%,rgba(32, 255, 77, 0.1) 76%,transparent 77%,transparent),linear-gradient(90deg,transparent 24%,rgba(32, 255, 77, 0.1) 25%,rgba(32, 255, 77, 0.1) 26%,transparent 27%,transparent 74%,rgba(32, 255, 77, 0.1) 75%,rgba(32, 255, 77, 0.1) 76%,transparent 77%,transparent);background-size: 3rem 3rem;background-position: -1rem -1rem;width: 100%;/* height: 100%; */height: 100vh;position: relative;background-color: #1110;/* background-color: #111; */
}.qr-scanner .box {width: 213px;height: 213px;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);overflow: hidden;border: 0.1rem solid rgba(0, 255, 51, 0.2);/* background: url('http://resource.beige.world/imgs/gongconghao.png') no-repeat center center; */
}.qr-scanner .line {height: calc(100% - 2px);width: 100%;background: linear-gradient(180deg, rgba(0, 255, 51, 0) 43%, #00ff33 211%);border-bottom: 3px solid #00ff33;transform: translateY(-100%);animation: radar-beam 2s infinite alternate;animation-timing-function: cubic-bezier(0.53, 0, 0.43, 0.99);animation-delay: 1.4s;
}.qr-scanner .box:after,
.qr-scanner .box:before,
.qr-scanner .angle:after,
.qr-scanner .angle:before {content: '';display: block;position: absolute;width: 3vw;height: 3vw;border: 0.2rem solid transparent;
}.qr-scanner .box:after,
.qr-scanner .box:before {top: 0;border-top-color: #00ff33;
}.qr-scanner .angle:after,
.qr-scanner .angle:before {bottom: 0;border-bottom-color: #00ff33;
}.qr-scanner .box:before,
.qr-scanner .angle:before {left: 0;border-left-color: #00ff33;
}.qr-scanner .box:after,
.qr-scanner .angle:after {right: 0;border-right-color: #00ff33;
}@keyframes radar-beam {0% {transform: translateY(-100%);}100% {transform: translateY(0);}
}
</style>

index.ts 文件

import QrScanner from './src/QrScanner.vue'
export {QrScanner}

使用组件

<template><div><QrScanner v-if="showQrCodeReader" @decode="onDecodeHandler" @close="qrReaderClose" /></div>
</template><script setup>import { QrScanner } from '@/components/QrScanner'
const showQrCodeReader = ref(false)
const paymentData = reactive({orderId: '',authCode: ''
})
const onDecodeHandler = (data) => {paymentData.authCode = datashowQrCodeReader.value = false
}
const qrReaderClose = () => {showQrCodeReader.value = false
}
</script>