vue 生成二维码

1.安装生成二维码插件

npm install qrcode --save

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

import QRCode from 'qrcode'

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

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

css:
#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!');
       })
   },