生成二维码(qrcodejs2 、vue-qr)

一、qrcodejs2 生成二维码

1、安装并引入项目中

① 下载qrcodejs2包并引入项目，可用script标签引入或者npm下载后进行import引入
<script src="qrcodejs2.js"></script>

或者
npm install qrcodejs2 --save
import QRCode from 'qrcodejs2'

2、具体使用

<div id="qrcodeDiv"></div>

let qrcodeDiv = document.getElementById('qrcodeDiv')

// 1、简单使用：
const qrcode = new QRCode(qrcodeDiv, 'this is qrcode')

// 2、复杂使用
const qrcode = new QRCode(qrcodeDiv, {
    text: 'this is qrcode', // 用于生成二维码的文本
    width: 200, // 高度
    height: 200, // 宽度
    colorDark: '#000000', //前景色
    colorLight: '#ffffff', //后景色
    correctLevel: QRCode.CorrectLevel.H, //容错级别 QRCode.CorrectLevel.L QRCode.CorrectLevel.M QRCode.CorrectLevel.Q QRCode.CorrectLevel.H
})
qrcode.clear() //清除二维码，仅仅在不支持canvas的浏览器下有用
qrcode.makeCode(text) //手动设置 用于生成二维码的文本

二、vue-qr 生成二维码

1、安装并引入项目中

npm install vue-qr --save
import VueQr from 'vue-qr'

2、具体使用

<vue-qr 
:text="text"
:size="size" 
:logoSrc="logoSrc" 
:bgSrc="bgSrc"/>

import VueQr from 'vue-qr' // Vue.2x 引入方法
// import VueQr from 'vue-qr/src/packages/vue-qr.vue' // Vue3.x引入方法
export default{
    components: {
        VueQr
    },
    data(){
        return {
            text: '预编码内容', // 预编码内容
            size: 200, // 尺寸
            logoSrc: '../../imgages/logoSrc.png', //嵌入二维码中心的图标
            bgSrc: '../../imgages/bgSrc.png', //背景图
        }
    }

}

vue-qr更多属性请参考文档