在vue项目中如何生成二维码

前景：在进行某个业务的迭代的时候，需求是要新增一个可以扫码跳转到h5页面进行签名。首先要实现在web端可以生成二维码，这时候同事推荐给我qrcode.js，我也百度查询了一下。

具体实现，在vue项目中可以使用qrcode.js生成二维码

1、首先安装包qrcodejs2：

npm install --save qrcodejs2

2、在项目中引入

import QRCode from "qrcodejs2"; //二维码

<el-col 
  :span='4'
  :offset='1'
  class="qrcode-box"
  style="padding-left: 15px"
>
  <div id="qrcode"
       ref="qrcode"
       style="padding:5px;border: 2px solid #DBDBDB">
  </div> 
  <p class="qrcode_bottom">手机扫一扫签名</p>
</el-col>

这里要注意二维码的跳转路径：localhostUrl

/* 扫码签名 */
    qrcode () {
      console.log('qrcode====',base.Microservice)
      let localhostUrl = window.location.href; //获取到测试or正式环境路径等等
      localhostUrl = localhostUrl.split("#");
      localhostUrl = localhostUrl[0];
      console.log("本地url：", localhostUrl)
    
    //二维码的生成
      let qrcode = new QRCode("qrcode", {
        width: 140,
        height: 140, // 高度
        text: `${localhostUrl}#/writtenSign?id=${this.orderListId}`
      });
    }

注意生成二维码的函数调用，要在mounted中先调用

//注意：二维码的生成原理也是canvas绘图，因此在mounted中先调用
mounted () {
   this.qrcode();
}

详情参考：QRCode.js：使用 JavaScript 生成二维码

还可以使用以下方法等：
qrcode.clear(); // 清除代码
qrcode.makeCode("http://www.w3cschool.cc"); // 生成另外一个二维码