Vue實現手機掃描二維碼預覽頁面效果
更新時間：2020年05月28日 10:21:05 作者：我是君君呀
這篇文章主要為大家詳細介紹了Vue實現手機掃描二維碼預覽頁面效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了Vue實現手機掃描二維碼預覽頁面的具體代碼，供大家參考，具體內容如下
背景：vue-cli3 + ant-design-vue 搭建的后臺管理系統
需求：實現掃描二維碼即可在手機預覽H5頁面功能
使用插件：qrcode
step1：安裝插件
npm install qrcode --save
step2：引入插件
在項目中新建QRcode.vue文件
<template>
<div id="qrCode">
<div id="code"></div>
<canvas id="canvas"></canvas>
</div>
</template>
<script>
import QRCode from "qrcode";
export default {
props: {
url: {
type: String
}
},
data() {
return {
msg: "hello vue",
codes: ""
};
},
components: {
QRCode: QRCode
},
methods: {
useqrcode() {
var canvas = document.getElementById("canvas");
QRCode.toCanvas(canvas, this.url, function(error) {
if (error) console.error(error);
});
}
},
mounted() {
this.useqrcode();
}
};
</script>
<style lang="stylus" scoped>
#qrCode {
text-align: center;
}
</style>
step3：在需要使用該插件的地方引入
例如：
<template>
<div>
<QRcode :url='url'/>
</div>
</template>
<script>
import QRcode from '../../QRcode.vue'
export default {
components: {
QRcode
},
data() {
return {
url:'(需要生成二維碼的網址)'
}
}
}
</script>
更多文章可以點擊《Vue.js前端組件學習教程》學習閱讀。
關于vue.js組件的教程，請大家點擊專題vue.js組件學習教程進行學習。
更多vue學習教程請閱讀專題《vue實戰(zhàn)教程》
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
本文主要介紹了ElementUI中el-tabs事件綁定的具體使用，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-04-04
這篇文章主要介紹了基于Vue CSR的微前端實現方案實踐，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-05-05
這篇文章主要為大家詳細介紹了vue項目實現添加圖片裁剪組件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
日常開發(fā)中除了直接在input標簽上使用v-model指令外,封裝的組件也需要v-model,下面這篇文章主要給大家介紹了關于Vue自定義組件中v-model使用的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-05-05
provide和inject可以實現嵌套組件之間進行傳遞數據,這兩個函數都是在setup函數中使用的,下面這篇文章主要給大家介紹了關于Vue3學習筆記之依賴注入Provide?/?Inject的相關資料,需要的朋友可以參考下2023-05-05
這篇文章主要介紹了Vue 中的受控與非受控組件的實現，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
這篇文章主要給大家介紹了關于如何使用Vue進行文件預覽與打印功能的相關資料,這個功能其實也是自己學習到的,做完也有一段時間了,一直想記錄總結一下,需要的朋友可以參考下2023-10-10
這篇文章主要介紹了你了解vue3.0響應式數據怎么實現嗎，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-06-06
單項數據流和雙向數據綁定的概念，這兩種不是相互沖突的嗎？即然能用v-model雙向數據綁定，不應該就是雙向數據流了嗎？本文就詳細的介紹一下2022-04-04
這篇文章主要介紹了詳解關于Vuex的action傳入多個參數的問題，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02