在vue-cli项目中动态生成付款二维码

1. 首先引入qrcode

npm install qrcode

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

import QRCode from 'qrcode'     //引入生成二维码组件

3.在template中定义生成二维码的位置和样式

    <mt-popup v-model="qrcode" popup-transition="popup-fade" class="qrcode">
      <div class="qrcodeMain">
        <div class="choosePay">请长按付款码进行支付</div>
        <div class="codeImg" id ="query">
          <canvas id="canvas"></canvas>
        </div>
        <div class="finish">已完成支付</div>
      </div>
    </mt-popup>

4.在script中执行以下函数

       var canvas = document.getElementById('canvas')
        QRCode.toCanvas(canvas, this.QueryDetail, function (error) {
        if (error) console.error(error)
        console.log('已生成二维码!');
        })