Vue中生成二维码功能实现

1.安装qrcodejs2

npm install  qrcodejs2 --save

2.在页面中引入

import QRCode  from "qrcodejs2"

3.在html中 必须为id值，这里用来存放生成的二维码

<div id="qrcode"></div>

4.data中写入生成二维码内容或链接

data(){
        return{
            link:'https://www.baidu.com',
        }
    }

5.js方法编写

着重强调当时这里因为eslist语法报错 加上注释 // eslint-disable-line no-unused-vars

qrcode(){ 
                let qrcode = new QRCode('qrcode', { // eslint-disable-line no-unused-vars
                    width: 124,
                    height: 124,        // 高度
                    text:  this.link,   // 二维码内容
                    // render: 'canvas' ,   // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
                    background: '#fff',   // 背景色
                    foreground: '#ff0'    // 前景色
                })
        }

6.页面调用 必须要this.$nextTick 否则会出现 appendChild null 就是id为qrcode的dom获取不到 返回结果为null 根据项目情况进行调用，我是放在created中调用

this.$nextTick (function () {
            this.qrcode();
})