1. 程式人生 > >vue引用QrCode生成二維碼

vue引用QrCode生成二維碼

後臺生成二維碼連結返回到前臺,前臺做個渲染。

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) {

                    })