VUE 生成二维码插件

1、qrcodejs2

1. 安装 qrcodejs2 （注意：安装的是qrcodejs2，不要安装qrcode ---> 会报错）

npm install  qrcodejs2 --save

2. 页面中引入

3. dom 结构

4. JS 方法编写

export default {
    
        data(){
            link: 'https://baidu.com'
        },
        
        methods: {
            //  生成二维码
            qrcode () {
                let that = this;
                let qrcode = new QRCode('qrcode', {
                    width: 124,
                    height: 124,        // 高度
                    text:  this.link,   // 二维码内容
                    // render: 'canvas' ,   // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
                    // background: '#f0f',   // 背景色
                    // foreground: '#ff0'    // 前景色
                })
            }
        },

        components: { QRCode }
        
}

5）页面调用

//  注意： 在需要调用的地方  这样必须这样调用  否则会出现  appendChild  null  就是id为qrcode的dom获取不到 返回结果为null

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

2、vue-qart

1） 安装 vue-qart

npm install vue-qart --save

2. 页面中引入

3. data 中数据配置

export default {
    
        data(){
            downloadButton:false,
            config: {
               value: 'https://baidu.com',
               imagePath: '/static/logo/logo.png',
               filter: 'color'
            }
        },

        components: { VueQArt }
        
    }
    

4. dom 结构

3 实际项目中

3.1 引入文件

qrcodejs2---引入.jpg

3.2 生成二维码函数

生成二维码的函数.jpg

3.3 相应的位置调用函数

相应的位置调用生成二维码函数.jpg

3.4 生成的二维码（案例：百度）

生成的二维码.jpg