vue引用QrCode生成二维码

版权声明：本BLOG上原创文章未经本人许可，不得用于商业用途及传统媒体。网络媒体转载请注明出处，否则属于侵权行为。 https://blog.csdn.net/liaoxuewu/article/details/83211454

后台生成二维码链接返回到前台，前台做个渲染。

1.npm install安装一下插件QrCode

2.引入

import QrCode from 'qrcode'

3.渲染二维码的标签

<canvas id="qrcode-canvas"></canvas>

4.向后台发送请求获取链接并在页面生成二维码

	let vm = this;
    var postData = {
            
    }
    vm.$http.post(baseUrl+'/pay/mergePayOrder/qrCode', qs.stringify(postData))
    	.then(function (res) {
         	var res = res.data;
             if(res.status == 1) {
             	var codeUrl = res.data.codeUrl; //二维码的链接
           		
                var canvas = document.getElementById('qrcode-canvas');//获取渲染二维码的标签
                QrCode.toCanvas(canvas, codeUrl, (error) => {
                	if (error) {
                       console.log(error)
                   	} else {
                        console.log('success')
                                }
                            })
                        }
                    })
                    .catch(function(err) {

                    })