27、前端生成二维码的两种方式

参考：juejin.cn/post/717360…

<template>
  <div class="code">
    <div class="title">请扫描二维码</div>
    <div class="warp">
      <div class="item-pic" id="qrCode"></div>
    </div>
  </div>
</template>

<script>
import QRCode from "qrcodejs2";
export default {
  name: "HomeView",
  data() {
    return {
      isShow: false
    }

  },
  mounted() {
    this.isShow = this.getCode('code') ? true : false;
    console.log('code=>', this.getCode('code'), 'this.isShow=>', this.isShow);
    if (this.isShow) {
      // this.getQRInviteCode();
      this.getPersonQRCode('https://www.baidu.com/')
    }
  },
  methods: {
    getCode(name) {
      const param = window.location.href.split('?')[1] ? window.location.href.split('?')[1].split('#')[0] : ""
      if (param) {
        var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)')
        var r = param.match(reg)
        if (r !== null) {
          return unescape(r[2])
        }
      }
      return null
    },
     // 方法一：
    // getQRInviteCode() {
    //   // 生成二维码
    //   new QRCode("qrCode", {
    //     width: 300, //宽度
    //     height: 300, // 高度
    //     colorDark: "green",//有图案的地方
    //     colorLight: "#ffffff",// 没图的地方
    //     text: "https://www.baidu.com/",
    //     render: "canvas", // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
    //   });
    // },
    // 方法二：
    getPersonQRCode(data) {
      let qrcode
      qrcode = new QRCode(document.getElementById('qrCode'), {
        width: 120,
        height: 120,
      })
      qrcode.makeCode(data)
      let img = document.getElementById('qrCode').getElementsByTagName('img')[0]
      let canvas = document.getElementById('qrCode').getElementsByTagName('canvas')[0]
      if (canvas) {
        img.src = canvas.toDataURL('image/png')
        img.style.display = 'block'
        canvas.style.display = 'none'
      }
    }
  },
};
</script>
<style lang="less" scoped>
.code {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  flex-direction: column;

  .title {
    height: 30px;
    margin: 20px 0;
  }
}
</style>