How to create QR codes on the front end

Method 1: qrcodejs2 plug-in

Install dependencies: npm install --save qrcodejs2

html code:

   <div id="qrcode" ref="qrCodeDiv"></div>
   <button @click="bindQRCode">点击生成二维码</button>

js code:

    import QRCode from "qrcodejs2";
    
    bindQRCode() {
    
    
      document.getElementById("qrcode").innerHTML = "";//为了防止生成多张，生成前先清空原先的；
      new QRCode(this.$refs.qrCodeDiv, {
    
    
        text: "我是一个二维码", //二维码的内容
        width: 150,            //二维码的宽度
        height: 150,           //二维码的高度
        colorDark: "#333333",  //二维码颜色
        colorLight: "#ffffff", //二维码背景色
        correctLevel: QRCode.CorrectLevel.L, //容错率，L/M/H
      });
    }

The renderings are as follows:

Method 2: vue-qr plug-in
Install dependencies: npm install vue-qr --save

HTML code (vue component):

<vue-qr
        :size="300"				// 宽高
        :logoSrc="icode"		// 图片地址
        :logoScale='0.3'		// 图片缩放比例
        :text="codeValue"		// 扫码后查看到的文本
        :margin='2'				// 左边距2px
    ></vue-qr>

js code:

    import vueQr from "vue-qr";
    
    data() {
    
    
        return {
    
    
            codeValue: '我是二维码',
            icode: require("../../assets/image/login/bg2.jpg"),
        };
    },
    components: {
    
    
        vueQr,
    }

The renderings are as follows: