vue实现扫码条码
使用 Vue 实现扫码条码功能
安装依赖库
推荐使用 vue-barcode-reader 或 quagga 库实现扫码功能。安装命令如下：
npm install vue-barcode-reader quagga使用 vue-barcode-reader 实现
该库封装了浏览器的 Barcode Detection API，适用于简单场景：
<template>
<div>
<video ref="video" width="300" height="200" autoplay></video>
<button @click="startScan">开始扫描</button>
<p>扫描结果: {{ result }}</p>
</div>
</template>
<script>
import { BarcodeDetector } from 'vue-barcode-reader';
export default {
data() {
return {
result: '',
detector: null
};
},
methods: {
async startScan() {
this.detector = new BarcodeDetector({ formats: ['ean_13'] });
const stream = await navigator.mediaDevices.getUserMedia({ video: true });
this.$refs.video.srcObject = stream;
setInterval(async () => {
const barcodes = await this.detector.detect(this.$refs.video);
if (barcodes.length > 0) {
this.result = barcodes[0].rawValue;
stream.getTracks().forEach(track => track.stop());
}
}, 1000);
}
}
};
</script>使用 Quagga 实现
Quagga 支持更多条码格式且兼容性更好：
<template>
<div>
<div id="interactive" class="viewport"></div>
<button @click="stopScan">停止扫描</button>
<p>结果: {{ decodedText }}</p>
</div>
</template>
<script>
import Quagga from 'quagga';
export default {
data() {
return {
decodedText: ''
};
},
mounted() {
Quagga.init({
inputStream: {
name: "Live",
type: "LiveStream",
target: document.querySelector('#interactive'),
constraints: {
width: 480,
height: 320,
facingMode: "environment"
}
},
decoder: {
readers: ["ean_reader"]
}
}, err => {
if (err) console.error(err);
Quagga.start();
});
Quagga.onDetected(result => {
this.decodedText = result.codeResult.code;
});
},
methods: {
stopScan() {
Quagga.stop();
}
}
};
</script>
<style>
.viewport {
width: 480px;
height: 320px;
margin: 0 auto;
}
</style>注意事项
- 浏览器兼容性：Chrome 和 Edge 对 Barcode Detection API 支持较好，移动端需测试兼容性
- HTTPS 环境：摄像头调用需要安全上下文
- 性能优化：扫描间隔建议设置在 500ms-1000ms 之间
- 错误处理：添加用户拒绝摄像头权限的提示处理
移动端适配建议
对于移动端项目，可增加全屏模式和方向锁定：
.viewport {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 9999;
}以上两种方案均可实现基础扫码功能，根据项目需求选择合适方案。Quagga 支持更多格式（如 Code128、QR Code 等），而 vue-barcode-reader 更轻量。
