利用vue来制作二维码的3种办法

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种办法相关推荐

Vue中生成二维码的一种方式—vue-qr
Vue中生成二维码的一种方式-vue-qr vue实现二维码生成(vue + vue-qr)
Java和C#环境中制作二维码图片
二维码作为一种先进的应用,随着移动互联网和智能终端的普及而快速发展,在媒体.产品质量.仓储物流登各行各业都应用广泛.二维码具有存储量大.保密性高.追踪性高.抗损性强.被援性大.成本便宜等特性,这些特性 ...
python制作二维码_利用Python制作二维码
利用简单的Python代码制作二维码友情链接:饿了么外卖大红包限时领取一.制作工具安装Python环境 + PyCharm编译器. 二.电脑系统本人win10 + Python3.7.0 + ...
利用mathematica制作二维码
利用mathematica制作二维码今天看到一篇文章讲mma来做二维码的,觉得挺有趣,就重新实现了一下,完善了一下. 主要就是两个函数 BarcodeImage[img,"QR" ...
Qt利用QZXing和QRenCode识别二维码和制作二维码
制作二维码和识别二维码需要用到第三方库,制作需要用到QRenCode这个库,如果没有的,大家可以在官网下载,或者去这个网址直接下载我编译好的两个库和头文件 [https://download.csd ...
vue前端生成二维码，实现扫码下载功能
vue前端生成二维码,实现扫码下载功能首先需要安装一个插件 npm install --save qrcodejs2 然后在需要的页面引入插件,最后使用 <template><di ...
用QRCode.js制作二维码的生成器（qrcode.makeCode方法生成二维码）
现在前端二维码的生成器有很多,像草料二维码生成器,联图二维码生成器等这些在线生成器都是生成功能比较强大,生成的二维码比较精美的在线生成器,看着比较高大上,那么他们的实现原理?就是通过QRCode.js ...
Python用qrcode和PIL制作二维码并添加汉字（用Python在图片上添加汉字）
前言由于项目需要批量的二维码,但是普通制作的二维码上面没有文字,难以区分不同的二维码,所以为了批量制作带汉字的二维码,所以自己查找找到了这个方法,写出来做个笔记. 使用步骤 1.引入库 import ...
怎样批量制作二维码标签？
使用二维码管理大批量物品时,通常需要批量制作二维码标签,每个标签都带有不同的二维码和文字信息,例如在设备管理中,不同的设备,贴有不同的二维码标签. 我们可利用免费的第三方软件,设计.打印二维码标签,例 ...

利用vue来制作二维码的3种办法

利用vue来制作二维码的3种办法相关推荐

最新文章

热门文章