vue实现扫描二维码
Vue 实现扫描二维码功能
安装二维码扫描库
推荐使用 vue-qrcode-reader 库，它基于 jsQR 和 Instascan，支持在 Vue 项目中快速集成二维码扫描功能。安装命令如下：
npm install vue-qrcode-reader基础实现代码
在 Vue 组件中引入 QrcodeStream 或 QrcodeCapture 组件，分别用于实时扫描和静态图片解析。
<template>
<div>
<!-- 实时扫描 -->
<qrcode-stream @decode="onDecode" :paused="paused"></qrcode-stream>
<p>扫描结果: {{ decodedContent }}</p>
<!-- 图片解析 -->
<qrcode-capture @decode="onDecode"></qrcode-capture>
<input type="file" @change="onFileUpload">
</div>
</template>
<script>
import { QrcodeStream, QrcodeCapture } from 'vue-qrcode-reader';
export default {
components: { QrcodeStream, QrcodeCapture },
data() {
return {
decodedContent: '',
paused: false
};
},
methods: {
onDecode(content) {
this.decodedContent = content;
this.paused = true; // 扫描成功后暂停
},
onFileUpload(event) {
const file = event.target.files[0];
if (file) {
const img = new Image();
img.src = URL.createObjectURL(file);
// 图片解析逻辑由 QrcodeCapture 自动处理
}
}
}
};
</script>自定义扫描界面
通过 CSS 和插槽自定义扫描框样式：
<qrcode-stream @decode="onDecode">
<div class="scan-overlay">对准二维码</div>
</qrcode-stream>
<style>
.scan-overlay {
position: absolute;
width: 80%;
height: 200px;
border: 2px dashed #fff;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>错误处理
监听 error 事件处理摄像头权限或兼容性问题：
<qrcode-stream @error="onError"></qrcode-stream>
methods: {
onError(error) {
console.error('摄像头错误:', error.name);
if (error.name === 'NotAllowedError') {
alert('请授予摄像头权限');
}
}
}移动端适配
在移动端需注意：
- 添加
user-select: none防止长按误触 - 通过
@init事件检查后置摄像头支持：<qrcode-stream @init="onInit"></qrcode-stream>
methods: { onInit(promise) { promise.then(() => { console.log('摄像头初始化成功'); }).catch(error => { alert('移动端需启用摄像头权限'); }); } }
#### 替代方案
如果遇到兼容性问题，可改用纯 JavaScript 库如 `jsQR`：
```javascript
import jsQR from 'jsqr';
function scanWithJsQR(imageData) {
const code = jsQR(imageData.data, imageData.width, imageData.height);
if (code) {
console.log('解码结果:', code.data);
}
}以上方法覆盖了从基础实现到高级定制的完整流程，可根据实际需求选择适合的方案。
