vue 生成二维码

1、引入qrcode

npm install qrcode --save

2、在需要使用到生成二维码的组件中引入

import QRCode from 'qrcode'

3、在HTML中定义生成的位置，注意添加样式

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

#qrCodeCanvas{
      padding: 0!important;
      margin: 0!important;
      width: 100%!important;
      height: auto!important;
 }

4、在js中定义生成二维码的方法并调用

//动态生成二维码
        useqrcode(){
            //生成的二维码内容，可以添加变量
            this.QueryDetail=‘https://www.baidu.com/’;
            var canvas = document.getElementById('qrCodeCanvas')
            QRCode.toCanvas(canvas, this.QueryDetail, function (error) {
                if (error) console.error(error)
                console.log('success!');
            })
        },