前端制作二维码的方法有哪些_免费的二维码生成网页「建议收藏」

前端制作二维码的方法有哪些_免费的二维码生成网页「建议收藏」前端生成二维码_前端生成二维码

方法一: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,
    }

效果图如下:
在这里插入图片描述

今天的文章前端制作二维码的方法有哪些_免费的二维码生成网页「建议收藏」分享到此就结束了,感谢您的阅读。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:http://bianchenghao.cn/77497.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注