2019-11-27VUE一键生成二维码npm插件

1、qrcodejs2

安装 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,安装：

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 引入文件

3.2 生成二维码函数

3.3 相应的位置调用函数

3.4 生成的二维码