目录
0.前言
npm 中搜索发现好多二维码生成的组件,大概看了下,比较常用的可能是qrcodejs2和vue-qr,
分别截了npm这两个组件的部分介绍。
下面分别介绍下两个组件的使用吧。
1. qrcodejs2组件的使用
1.1 安装
>npm install qrcodejs2 --save
1.2 引入
import QRCode from 'qrcodejs2';
1.3 使用
页面内容
<div class="qrcode" ref="qrCode"></div>
方法
createQRCode() {
let qrcode = new QRCode(this.$refs.qrCode, {
text: 'Hellow QRCode!',
width: 200,
height: 200,
colorDark: "green", // 二维码颜色
colorLight: "#ffffff", // 二维码背景色
correctLevel: QRCode.CorrectLevel.H // 容错率,L:容错率为 7%;M:容错率为 15%;Q:容错率为 25%;H:容错率为 30%. PS:容错级别越高抗残破或遮挡的能力就越强
});
// qrcode.clear(); // 清除二维码
// qrcode.makeCode("https://blog.csdn.net/jinse29?type=blog"); // 设置二维码内容,可跳转链接
1.4 效果图
1.5 小结
qrcodejs2的api提供的参数比较少,满足大部分的场景,简单总结下就是朴实无华
2. vue-qr组件的使用
2.1 安装
npm install vue-qr --save
2.2 引入
import vueQr from 'vue-qr'
作为组件引入,需要在components中声明
components: {
vueQr
},
2.3 使用
<vue-qr :logoSrc="require('@/assets/img/icon-unhandle.png')"
logoScale="0.3"
text="Welcome to My World!"
correntLevel="0"
size="200"
magin="auto"
colorDark="black"
colorLight="white"
:bgSrc="require('@/assets/img/bg-girls.png')"/>
2.4 效果图
2.5 小结
vue-qr的api提供的参数配置比较丰富,我只是配置了一部分,下图是截取的最新的参数配置说明,可根据自己的实际业务需求进行配置。
3. 最后
两种组件使用都比较简单,再一次感叹程序员的伟大,具体的选取可根据自己的喜好或者实际的场景来做选择~