在VUE中如何第三方插件生成二维码

意义：生成二维码的意思其实就是将一个URL地址保存在二维码中，扫描二维码的时候就指向地址，打开该URL。
步骤如下（可以参照JavaScript的二维码生成 – QRCode.js）
1、首先安装包qrcodejs2依赖：

npm install --save qrcodejs2

2、在项目中引入（最好单页面引用）

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

3、例子：标签写法

<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();
}