您好,登錄后才能下訂單哦!
這篇文章主要介紹了使用vue實(shí)現(xiàn)掃碼功能的案例,具有一定借鑒價(jià)值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。
最近在項(xiàng)目中碰見一個(gè)打開攝像頭掃碼的功能,項(xiàng)目最后打包成app,用的是hBuilder打的包,剛好hBuilder打包集成H5+sdk,就可以直接用人家的sdk了。
代碼實(shí)現(xiàn):
<template> <div class="scan"> <div id="bcid"> <div ></div> <p class="tip">...載入中...</p> </div> <footer> <button @click="startRecognize">1.創(chuàng)建控件</button> <button @click="startScan">2.開始掃描</button> <button @click="cancelScan">3.結(jié)束掃描</button> <button @click="closeScan">4.關(guān)閉控件</button> </footer> </div> </template> <script type='text/ecmascript-6'> let scan = null; export default { data() { return { codeUrl: '', } }, methods: { //創(chuàng)建掃描控件 startRecognize() { let that = this; if (!window.plus) return; scan = new plus.barcode.Barcode('bcid'); scan.onmarked = onmarked; function onmarked(type, result, file) { switch (type) { case plus.barcode.QR: type = 'QR'; break; case plus.barcode.EAN13: type = 'EAN13'; break; case plus.barcode.EAN8: type = 'EAN8'; break; default: type = '其它' + type; break; } result = result.replace(/\n/g, ''); that.codeUrl = result; alert(result); that.closeScan(); } }, //開始掃描 startScan() { if (!window.plus) return; scan.start(); }, //關(guān)閉掃描 cancelScan() { if (!window.plus) return; scan.cancel(); }, //關(guān)閉條碼識(shí)別控件 closeScan() { if (!window.plus) return; scan.close(); }, } } </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>
預(yù)覽:
打開Hbuilder,新建項(xiàng)目,將目錄指向 /dist ,然后右鍵轉(zhuǎn)換成移動(dòng)App,真機(jī)usb連接運(yùn)行
效果圖:
感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享的“使用vue實(shí)現(xiàn)掃碼功能的案例”這篇文章對(duì)大家有幫助,同時(shí)也希望大家多多支持億速云,關(guān)注億速云行業(yè)資訊頻道,更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。