Vue cli 使用QRcode在dailog中生成二维码

在package.json中添加模块

"qrcode": "^1.4.4"

在组件中引入

import QRCode from 'qrcode'

生成二维码方法：

    creatQRcode() {
      const a = 'http://www.baidu.com'
      // 获取页面的canvas
      var msg = document.getElementById('msg_qrcode')
      // 将获取到的数据（val）画到msg（canvas）上
        QRCode.toCanvas(msg, a, function(error) {
          console.log(error)
        })
    }

在dailog中使用
注意一定要在@opened方法中使用创建二维码的方法，因为dialog的生成需要时间，否则QRcode会因为找不到dialog中的canvas而报错

      <el-dialog
        width="20%"
        align="center"
        title="请使用微信扫描二维码"
        :visible.sync="isqrcodevisible"
        append-to-body
        @opened="creatQRcode()"
      >
      
        <canvas id="msg_qrcode" />
        
      </el-dialog>