qrcodejs2

QRCode.js是用于制作QRCode的JavaScript库。QRCode.js通过HTML5 Canvas和DOM中的表格标签支持跨浏览器。QRCode.js没有依赖关系。

<template>
  <div class="content">
    <div class="title">我的二维码</div>
<!-- 放置二维码的容器,需要给一个ref -->
    <div id="qrCodeUrl" ref="qrCodeUrl" class="qrcode"></div>
    <div class="redtext">将二维码对准扫描口，</div>
  </div>
</template>

<script>
import QRCode from "qrcodejs2";

export default {
  components: {},
  data() {
    return {
      qrCode: null
    };
  },
  created() {
//二维码内容,一般是由后台返回的跳转链接,这里是写死的一个链接
    this.qrCode = this.$route.query.qrCode;
    setTimeout(() => {//此处可用nextTick代替定时器
      this.createQrCode();
    }, 0);
  },
  methods: {
    createQrCode() {
      const qrcode = new QRCode(this.$refs.qrCodeUrl, {
        text: this.qrCode,//二维码内容
        width: 180,
        height: 180,
        colorDark: "#000000",
        colorLight: "#ffffff",
        correctLevel: QRCode.CorrectLevel.H
      });
      console.log(qrcode);
    }
  }，
//离开页面清除已经生成的二维码
beforeDestroy（）{
   this.$refs.qrCodeUrl.innerHTML = ''
   }
   // qrcode.clear() //清除二维码 
    //qrcode.makeCode(url) //生成另一个新的二维码
//ps:由于使用不起作用，在调用qrCode前使用js原生方法清空元素内容

//document.getElementById('qrcode').innerHTML = “” 或者 this.$refs.qrCodeUrl.innerHTML = ""
};
</script>

<style lang="less" scoped>
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.title {
  padding-top: 5%;
}
.redtext {
  color: red;
  font-size: 13px;
}
#qrCodeUrl {
  width: 180px;
  height: 180px;
  margin: 20px 0;
}
</style>