vue 中生成二維碼之爬坑之路

最近在做vue中項目,有個需求是在你提交信息后把后台返給你的鏈接生成二維碼.

一共使用了兩種生成二維碼的方法

1.vue-qr

這個是在一進入頁面直接生成二維碼,具體介紹見文檔:https://www.npmjs.com/package/vue-qr;

2.qrcode

這個可以,符合我的要求

tempalte:

 <canvas id="canvas" ></canvas>

script:

引入:

import VueQr from 'qrcode'

組件:

components: { VueQr },

在方法內使用:

var canvas = document.getElementById('canvas')
            VueQr.toCanvas(canvas, qrUrl, function (error) {
              if (error) console.error(error)
               console.log("success")
            })

 // qrUrl為后台給的鏈接
// 最后就可以在頁面上顯示了