vue來制作二維碼的辦法有哪些？
這里我簡單來介紹下三種辦法；
方法一.利用vue-qart里自帶的canvas來繪畫二維碼
步驟1：安裝

npm install vue-qart --save

步驟2：在js中引入并注冊成組件

import VueQArt from "vue-qart";components: {VueQArt,},

步驟3：在頁面中使用

<vue-q-art :config="configs" :downloadButton="downloadButton"></vue-q-art>

方法二.利用qrcodejs來實現二維碼
步驟1：安裝

npm install qrcodejs2 --save

步驟2：在js中引入，注冊成組件，并定義一個調用的方法

import QRCode from "qrcodejs2";components: {QRCode}, qrcode() {//這里是調用的方法let qrcode = new QRCode("qrcode", {width: 232, // 設置寬度height: 232, // 設置高度text: "https://baidu.com"});} //以下是data中的數據downloadButton: false,configs: {value: "https://baidu.com",imagePath: "/static/1560242161(1).png",filter: "color"},

步驟3：在頁面中使用

<div id="qrcode" ref="qrcode"></div>

步驟4：調用

this.$nextTick(function() {this.qrcode(); });

方法三.利用vue-qr來實現二維碼
步驟1：安裝

npm install vue-qr --save

步驟2：在js中引入并注冊成組件，然后是在data里定義配置數據

import VueQr from 'vue-qr' components: {VueQr},data() {return {config: {value: 'www.baidu.com',//顯示的值、跳轉的地址imagePath: require('../assets/logo.png')//中間logo的地址，require必要}}}

步驟3：在頁面中使用

<vue-qr style="float:left;margin-left:200px;" :bgSrc='config.imagePath' :text="config.value" :size="200" :margin="0"></vue-qr> <vue-qr style="float:left;margin-left:200px;" :logoSrc="config.imagePath" :text="config.value" :size="200" :margin="0"></vue-qr> <vue-qr style="float:left;margin-left:200px;" :bgSrc='config.imagePath' :logoSrc="config.imagePath" :text="config.value" :size="200" :margin="0"></vue-qr>

*具體完整代碼我已經放上來了

<template><div class="hello"><vue-q-art :config="configs" :downloadButton="downloadButton"></vue-q-art><hr><div id="qrcode" ref="qrcode"></div><hr><vue-qrstyle="float:left;margin-left:200px;":bgSrc="config.imagePath":text="config.value":size="200":margin="0"></vue-qr><vue-qrstyle="float:left;margin-left:200px;":logoSrc="config.imagePath":text="config.value":size="200":margin="0"></vue-qr><vue-qrstyle="float:left;margin-left:200px;":bgSrc="config.imagePath":logoSrc="config.imagePath":text="config.value":size="200":margin="0"></vue-qr></div> </template><script> import VueQArt from "vue-qart"; import QRCode from "qrcodejs2"; import VueQr from "vue-qr";export default {data() {return {downloadButton: false,configs: {value: "https://baidu.com",imagePath: "/static/1560242161(1).png",filter: "color"},config: {value: "https://baidu.com", //顯示的值、跳轉的地址imagePath: require("../assets/logo.png") //中間logo的地址}};},components: {VueQArt,QRCode,VueQr},methods: {qrcode() {let qrcode = new QRCode("qrcode", {width: 232, // 設置寬度height: 232, // 設置高度text: "https://baidu.com"});}},mounted() {this.$nextTick(function() {this.qrcode();});} }; </script><style> #qrcode img {display: block;margin: 0 auto; } </style>

最后實現的效果：

總結

以上是生活随笔為你收集整理的利用vue来制作二维码的3种办法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。