前端项目中生成二维码

在日常项目开发中，经常碰到需要生成二维码的功能，在查了资料和网上大佬的分享发现两个比较好用的二维码组件，在次总结下：

一、qrCode
（1）、安装 vue-qart

*注意：这里安装的是qrcodejs2，不是qrcode，否则会报错
npm install qrcodejs2 --save

（2）、页面引入——在入口文件（默认是main.js）里引入：
我用的vue项目，这只介绍在vue中的使用

import QRCode from 'qrcodejs2'

（3）、在组建中使用

<template>
	 <div class="code_box">
	    <div id="qrcode" ref="qrcode"></div>
	 </div>
</template>
methods:{
	initData(){
        app.ajax({
            wait: false,
            close: false,
            path: '/app!getMyWalletAddress.action',
        }).then((res) => {
            if(res.data.status == "success") {
                this.addressStr = res.data.data.USDT;   // 需要生成二维码的内容
                if (this.addressStr) {
                    var qrcode = new QRCode(this.$refs.qrcode, {
                        text: this.addressStr,   // 需要生成二维码的内容
                        width: 147,
                        height: 147,
                        colorDark: '#000000',
                        colorLight: '#ffffff',
                        correctLevel: QRCode.CorrectLevel.H
                    })
                }
            } else {
                Toast({
                    message: res.data.message,
                    duration: 1500
                });
            }
        })
    },
}

*注意，调用的时候必须保证<div id="qrcode" ref="qrcode"></div>此DOM为显示状态，否则会出现 *appendChild null错误，就是id为qrcode的dom获取不到，返回结果为null

二、vue-qart

1. 安装 vue-qart

npm install vue-qart --save

2)引入

import VueQArt from 'vue-qart'
components: {VueQArt}

3)配置

downloadButton:false,
config: {
   value: 'https://baidu.com',
   imagePath: '/static/logo/ydLogo.png',
   filter: 'color'
}

4)页面

<vue-q-art :config="config" :downloadButton="downloadButton"></vue-q-art>