VUE 生成二維碼插件

原文:https://www.jianshu.com/p/496fd1cbee8d

npm install qrcodejs2 --save
頁面中引入

dom 結構

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
頁面中引入

data 中數據配置

export default {

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

    components: { VueQArt }
    
}

dom 結構

3 實際項目中 3.1 引入文件 qrcodejs2---引入.jpg 3.2 生成二維碼函數

生成二維碼的函數.jpg
3.3 相應的位置調用函數