VUE使用QRcode或者vue-qr生成二维码
这里介绍两种vue生成二维码的方法
- QRcode
- vue-qr
vue-qr比QRcode功能多在可以在中间加logo
下面先介绍QRcode
vue里安装qrcodejs的npm包
npm install qrcodejs2
import QRCode from 'qrcodejs2'
<div class="qrcode" ref="qrCodeUrl"></div>
methods: { creatQrCode() { var qrcode = new QRCode(this.$refs.qrCodeUrl, { text: 'xxxx', width: 100, height: 100, colorDark: '#000000', colorLight: '#ffffff', correctLevel: QRCode.CorrectLevel.H }) }, } mounted() { this.creatQrCode(); },
接下来介绍可以带logo的二维码vue-qr
npm安装
npm install vue-qr --save
<script> import vueQr from 'vue-qr' export default { name: "qecode", data() { return { imageUrl: require("../assets/logo.png"), } }, components: { vueQr }, }, } </script>
<vue-qr :logoSrc="imageUrl" text="xxx" :size="200"></vue-qr>
是不是比qrcode简单的多, 只不过两种生成二维码的样式还是有区别的,各有所爱吧,用哪个都可以
要注意一点,引用的img路径一定要加require
VUE使用QRcode或者vue-qr生成二维码的更多相关文章
- Jquery.Qrcode在客户端动态生成二维码并添加自定义Logo
0 Jquery.Qrcode简介 Jquery.Qrcode.js是一个在浏览器端基于Jquery动态生成二维码的插件,支持Canvas和Table两种渲染方式,它的优点是在客户端动态生成,减轻了服 ...
- qr 生成二维码
package com.common; import com.swetake.util.Qrcode; import jp.sourceforge.qrcode.QRCodeDecoder; impo ...
- vue cli3项目中使用qrcodejs2生成二维码
组件的形式创建 1.下载依赖 npm install qrcodejs2 2.创建一个.vue的组件放置代码(我创建的是qrcodejs2.vue) //template中的代码 <templa ...
- php qr生成二维码
二维码就是用在平面上用特定的几何图形记录数据信息的,QR码是常见的一种二维码.推荐使用生成QR码的php类库PHP QR Code. 例子: <?php ini_set('display_e ...
- 在input中输入需要的数据,使用qrcode,点击生成二维码
话不多说直接上代码 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type&quo ...
- 关于 QRCode 的问题[C# 生成二维码固定大小]
一直在纠结了一天多的问题:就是为什么生成的二维码会随着内容多少的变化而变化大小,但是为什么网上做出来的二维码内容变化但是大小却没有变化?刚开始的时候我就一直围绕着是不是根据缩略图来做的,但是这个方法行 ...
- jquery.qrcode.min.js——前端生成二维码
下载地址:[http://www.jq22.com/jquery-info294] demo1:[https://www.helloweba.com/view-blog-226.html] demo2 ...
- vue 生成二维码+截图
链接生成二维码 1.npm安装 npm install --save qrcodejs2 2.引入 import QRCode from 'qrcodejs2' 3.生成二维码 new QRCode( ...
- 在ts+vue中实现前端批量下载打包二维码
---恢复内容开始--- 一.插件安装 首先是插件的安装与引入,这里我们用的是qrcode的这个插件,直接使用npm install qrcodejs2安装即可,但是这里要注意,如果你用的是ts进行开 ...
- 使用Python的库qrcode生成二维码
现在有很多二维码的生成工具,在线的,或者安装的软件,都可以进行生成二维码.今天我用Python的qrcode库生成二维码.需要预先安装 Image 库 安装 用pip安装 # pip install ...
随机推荐
- Codeforces Round #530 (Div. 2) (前三题题解)
总评 今天是个上分的好日子,可惜12:30修仙场并没有打... A. Snowball(小模拟) 我上来还以为直接能O(1)算出来没想到还能小于等于0的时候变成0,那么只能小模拟了.从最高的地方进行高 ...
- [BOI2008]Elect 选举
背包. #include <algorithm> #include <iostream> #include <cstdlib> #include <cstri ...
- session--保持登录20分钟,常用与用户登录状态
思路:request 与 session 两个作对比 1. . . 2. 3.
- 搭建一台功能简单的FTP服务器
#vi /etc/sysconfig/network-scripts/ifcfg-eno33554952 #revice network restart #ping www.baidu.com #ip ...
- CentOS7 安装 PHP7.2
点击查看原文 安装源 安装 EPEL 软件包: $ sudo yum install epel-release 安装 remi 源: $ sudo yum install http://rpms.re ...
- Spring Security核心类关系图
以有限的脑力记忆无限的Knowledge,多画图,多画图,多画图. 核心类Authentication 和 GrantedAuthority AbstractAuthenticationToken 由 ...
- 【OpenCV, C++】实现向下光栅追踪检测边缘
设计函数如下: 其中 void gratingdetect(Mat &graysrc, Mat &graydst, int high, int low); 参数列表中,第一项是输入的灰 ...
- 【NJU749D】triple(莫比乌斯反演)
题意: cas<=100 n<=10^5 思路:与两个数的没什么区别 F(d)=(n div d)*(n div d-1)*(n div d-2) div 6 再加上喜闻乐见的下底函数分块 ...
- 解决CDH SparkStreaming任务启动之后executor不停增长的问题,num-executors配置不管用。
spark2-submit --class SparkKafka --master yarn --executor-memory 1G --num-executors 6 --driver-memor ...
- IT领域的罗马帝国——微软公司
微软公司从做软件开始,起步很小.但是盖茨确是一直深耕于战略布局,像一个棋局高手,每一步棋都是看了后面几步. 盖茨居然用9年的时间憋出一个win3.0,成功击败了apple. 而这9年拖住apple的居 ...