您好,登錄后才能下訂單哦!
這篇文章主要為大家展示了“如何通過vue方式實現(xiàn)二維碼掃碼功能”,內(nèi)容簡而易懂,條理清晰,希望能夠幫助大家解決疑惑,下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“如何通過vue方式實現(xiàn)二維碼掃碼功能”這篇文章吧。
這個插件只能在https協(xié)議下才能訪問,http協(xié)議不好使,最好用vue2,vue3容易報錯?。。。。?/p>
通過vue的方式,實現(xiàn)掃碼功能
參考文檔:vue-qrcode-reader去官網(wǎng)–>官方文檔
npm install --save vue-qrcode-reader
因為可能多個頁面都會用到,所以弄成了組件
(1)在src下面的components創(chuàng)建qrcode.vue
(2)代碼實現(xiàn)
// qrcode.vue <template> <div> <!-- <p class="error">{{ error }}</p> --> <!--錯誤信息--> <!-- <p class="decode-result"> 掃描結(jié)果: <b>{{ result }}</b> </p> --> <!--掃描結(jié)果--> <!-- <p @click="openCamera">打開相機</p> <div v-show="show" class="cameraMessage"> <p @click="closeCamera">關(guān)閉相機</p> <p @click="openFlash">打開手電筒</p> <p @click="switchCamera">相機反轉(zhuǎn)</p> </div> --> <qrcode-stream v-show="qrcode" :camera="camera" :torch="torchActive" @decode="onDecode" @init="onInit" > <div> <div class="qr-scanner"> <div class="box"> <div class="line"></div> <div class="angle"></div> </div> <div class="txt"> 將二維碼/條碼放入框內(nèi),即自動掃描 <div class="myQrcode">我的二維碼</div> </div> </div> </div> </qrcode-stream> </div> </template> <script> // 下載插件 // cnpm install --save vue-qrcode-reader // 引入 import { QrcodeStream } from 'vue-qrcode-reader'; export default { // 注冊 components: { QrcodeStream }, data() { return { result: '', // 掃碼結(jié)果信息 error: '', // 錯誤信息 // show: false, // qrcode: false, qrcode: true, torchActive: false, camera: 'front', }; }, methods: { onDecode(result) { console.log(result); this.result = result; }, async onInit(promise) { const { capabilities } = await promise; const TORCH_IS_SUPPORTED = !!capabilities.torch; try { await promise; } catch (error) { if (error.name === 'NotAllowedError') { this.error = 'ERROR: 您需要授予相機訪問權(quán)限'; } else if (error.name === 'NotFoundError') { this.error = 'ERROR: 這個設(shè)備上沒有攝像頭'; } else if (error.name === 'NotSupportedError') { this.error = 'ERROR: 所需的安全上下文(HTTPS、本地主機)'; } else if (error.name === 'NotReadableError') { this.error = 'ERROR: 相機被占用'; } else if (error.name === 'OverconstrainedError') { this.error = 'ERROR: 安裝攝像頭不合適'; } else if (error.name === 'StreamApiNotSupportedError') { this.error = 'ERROR: 此瀏覽器不支持流API'; } } }, // 打開相機 // openCamera() { // this.camera = 'rear' // this.qrcode = true // this.show = true // }, // 關(guān)閉相機 // closeCamera() { // this.camera = 'off' // this.qrcode = false // this.show = false // }, // 打開手電筒 // openFlash() { // switch (this.torchActive) { // case true: // this.torchActive = false // break // case false: // this.torchActive = true // break // } // }, // 相機反轉(zhuǎn) // switchCamera() { // // console.log(this.camera); // switch (this.camera) { // case 'front': // this.camera = 'rear' // console.log(this.camera) // break // case 'rear': // this.camera = 'front' // console.log(this.camera) // break // } // } }, }; </script> <style scoped> .error { font-weight: bold; color: red; } .cameraMessage { width: 100%; height: 60px; } .qr-scanner { background-image: linear-gradient( 0deg, transparent 24%, rgba(32, 255, 77, 0.1) 25%, rgba(32, 255, 77, 0.1) 26%, transparent 27%, transparent 74%, rgba(32, 255, 77, 0.1) 75%, rgba(32, 255, 77, 0.1) 76%, transparent 77%, transparent ), linear-gradient( 90deg, transparent 24%, rgba(32, 255, 77, 0.1) 25%, rgba(32, 255, 77, 0.1) 26%, transparent 27%, transparent 74%, rgba(32, 255, 77, 0.1) 75%, rgba(32, 255, 77, 0.1) 76%, transparent 77%, transparent ); background-size: 3rem 3rem; background-position: -1rem -1rem; width: 100%; /* height: 100%; */ height: 100vh; /* height: 288px; */ position: relative; background-color: #1110; /* background-color: #111; */ } /* .qrcode-stream-wrapper { display: flex; justify-content: center; align-items: center; margin-top: 82px; clear: both; } */ /* .qrcode-stream-wrapper >>> .qrcode-stream-camera { width: 213px; height: 210px; clear: both; margin-top: 39px; } */ .qr-scanner .box { width: 213px; height: 213px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); overflow: hidden; border: 0.1rem solid rgba(0, 255, 51, 0.2); /* background: url('http://resource.beige.world/imgs/gongconghao.png') no-repeat center center; */ } .qr-scanner .txt { width: 100%; height: 35px; line-height: 35px; font-size: 14px; text-align: center; /* color: #f9f9f9; */ margin: 0 auto; position: absolute; top: 70%; left: 0; } .qr-scanner .myQrcode { text-align: center; color: #00ae10; } .qr-scanner .line { height: calc(100% - 2px); width: 100%; background: linear-gradient(180deg, rgba(0, 255, 51, 0) 43%, #00ff33 211%); border-bottom: 3px solid #00ff33; transform: translateY(-100%); animation: radar-beam 2s infinite alternate; animation-timing-function: cubic-bezier(0.53, 0, 0.43, 0.99); animation-delay: 1.4s; } .qr-scanner .box:after, .qr-scanner .box:before, .qr-scanner .angle:after, .qr-scanner .angle:before { content: ''; display: block; position: absolute; width: 3vw; height: 3vw; border: 0.2rem solid transparent; } .qr-scanner .box:after, .qr-scanner .box:before { top: 0; border-top-color: #00ff33; } .qr-scanner .angle:after, .qr-scanner .angle:before { bottom: 0; border-bottom-color: #00ff33; } .qr-scanner .box:before, .qr-scanner .angle:before { left: 0; border-left-color: #00ff33; } .qr-scanner .box:after, .qr-scanner .angle:after { right: 0; border-right-color: #00ff33; } @keyframes radar-beam { 0% { transform: translateY(-100%); } 100% { transform: translateY(0); } } </style>
(3)在需要掃碼的頁面引入
// import qrcode from '@/components/qrcode.vue';
(4)注冊組件
// components: { 'vue-qrcode': qrcode, },
(5)使用組件
// 在需要展示二維碼的地方進(jìn)行渲染 <vue-qrcode /> //如果上面這個不好使,可以用下面這個 <vue-qrcode></vue-qrcode>
以上是“如何通過vue方式實現(xiàn)二維碼掃碼功能”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學(xué)習(xí)更多知識,歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。