qrcodejs2和vue-qr二维码生成组件使用

目录

0.前言

1. qrcodejs2组件的使用

1.1 安装

1.2 引入

1.3 使用

1.4 效果图

1.5 小结

2. vue-qr组件的使用

2.1 安装

2.2 引入

2.3 使用

2.4 效果图

2.5 小结

3. 最后

---

---

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. 最后

两种组件使用都比较简单，再一次感叹程序员的伟大，具体的选取可根据自己的喜好或者实际的场景来做选择~