前端制作二维码的方法

方法一：qrcodejs2插件

安装依赖：npm install --save qrcodejs2

html代码：

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

js代码：

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

效果图如下：

方法2：vue-qr 插件
安装依赖：npm install vue-qr --save

html代码(vue组件)：

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

js代码：

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

效果图如下：