vue实现扫描二维码
Vue 实现扫描二维码的方法
在 Vue 项目中实现二维码扫描功能，可以通过以下方法完成：
使用 vue-qrcode-reader 库
vue-qrcode-reader 是一个专为 Vue 设计的二维码扫描库，基于 WebRTC 实现摄像头调用。
安装依赖：
npm install vue-qrcode-reader组件示例：
<template>
<div>
<qrcode-stream @decode="onDecode"></qrcode-stream>
<p>扫描结果: {{ result }}</p>
</div>
</template>
<script>
import { QrcodeStream } from 'vue-qrcode-reader'
export default {
components: { QrcodeStream },
data() {
return {
result: ''
}
},
methods: {
onDecode(decodedString) {
this.result = decodedString
}
}
}
</script>使用 zxing-js/library
纯 JavaScript 解决方案，适合需要更多自定义控制的场景。
安装依赖：
npm install @zxing/library实现代码：
<template>
<div>
<video ref="video" width="300" height="200"></video>
<button @click="startScan">开始扫描</button>
<p>结果: {{ scanResult }}</p>
</div>
</template>
<script>
import { BrowserQRCodeReader } from '@zxing/library'
export default {
data() {
return {
codeReader: null,
scanResult: ''
}
},
mounted() {
this.codeReader = new BrowserQRCodeReader()
},
methods: {
async startScan() {
try {
const result = await this.codeReader.decodeFromInputVideoDevice(
undefined,
this.$refs.video
)
this.scanResult = result.text
} catch (err) {
console.error(err)
}
}
}
}
</script>移动端适配方案
对于移动端浏览器，需要考虑权限处理和响应式布局：
<template>
<div class="scanner-container">
<qrcode-stream
@decode="onDecode"
:paused="paused"
@init="onInit"
></qrcode-stream>
</div>
</template>
<script>
import { QrcodeStream } from 'vue-qrcode-reader'
export default {
components: { QrcodeStream },
data() {
return {
paused: false,
error: ''
}
},
methods: {
onDecode(result) {
this.paused = true
// 处理扫描结果
},
async onInit(promise) {
try {
await promise
} catch (error) {
if (error.name === 'NotAllowedError') {
this.error = '请允许摄像头访问权限'
} else if (error.name === 'NotFoundError') {
this.error = '未检测到可用摄像头'
}
}
}
}
}
</script>
<style>
.scanner-container {
width: 100%;
max-width: 500px;
margin: 0 auto;
}
</style>注意事项
- 确保在 HTTPS 环境下使用，现代浏览器要求安全上下文才能访问摄像头
- 处理用户拒绝摄像头权限的情况
- 移动端注意横竖屏适配问题
- 扫描区域大小会影响识别成功率，建议不小于 300x300 像素
以上方法可根据项目需求选择，vue-qrcode-reader 提供了更简单的集成方式，而 zxing-js 则提供更多底层控制。
