vue项目中实现扫码功能

时间:2025-03-18 08:59:25
<template> <div class="scan"> <div id="bcid"> <div style="height:40%"></div> <p class="tip">...载入中...</p> </div> <footer> <button @click="startRecognize">1.创建控件</button> <button @click="startScan">2.开始扫描</button> <button @click="cancelScan">3.结束扫描</button> <button @click="closeScan">4.关闭控件</button> </footer> </div> </template> <script type='text/ecmascript-6'> let scan = null; export default { data() { return { codeUrl: '', } }, methods: { //创建扫描控件 startRecognize() { let that = this; if (!) return; scan = new ('bcid'); = onmarked; function onmarked(type, result, file) { switch (type) { case : type = 'QR'; break; case .EAN13: type = 'EAN13'; break; case .EAN8: type = 'EAN8'; break; default: type = '其它' + type; break; } result = (/\n/g, ''); = result; alert(result); (); } }, //开始扫描 startScan() { if (!) return; (); }, //关闭扫描 cancelScan() { if (!) return; (); }, //关闭条码识别控件 closeScan() { if (!) return; (); }, } } </script> <style lang="less"> .scan { height: 100%; #bcid { width: 100%; position: absolute; left: 0; right: 0; top: 0; bottom:3rem; text-align: center; color: #fff; background: #ccc; } footer { position: absolute; left: 0; bottom: 1rem; height: 2rem; line-height: 2rem; z-index: 2; } } </style>