生成二维码(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更多属性请参考文档