纯前端实现二维码生成(原生/vue方法)(超简单)

纯前端实现二维码生成(原生/vue方法)(超简单)

前言

我们借用了qrcode.js插件,这个插件可以帮助我们生成二维码,超简单超好用

下面是我生成了一个主页的二维码,大家可以扫码查看效果

插件引入

1.本地文件引入

本地引入依赖包地址:下载地址

 1.首先引入插件,这里我是script标签引入的,如果用vue直接全局引入即可

javascript"><script type="text/javascript" src="/js/qrcodejs-master/qrcode.js"></script>
2.npm方式引入

2.1控制台输入指令

npm install --save qrcodejs2-fix

2.2vue中引入

import QRCode from 'qrcodejs2-fix'

操作步骤

1.准备一个存放二维码的盒子

原生中使用ID绑定,VUE中使用ref绑定

<div id="qrCodeUrl"></div> //html中使用ID绑定
<div ref="qrcode"> //vue中只需要绑定一个ref值即可
 
</div>

2.js调用并且存放内容

这里是先把盒子为空了,然后再去调用方法生成二维码  text就是你的二维码内容:可以是一段文字,也可以是一个连接,这里我用的是连接,扫码后直接跳转

下面分别是原生和vue的调用方式

// html js    
document.getElementById("qrCodeUrl").innerHTML = "";
    let qrCodeUrl = new QRCode("qrCodeUrl", {
        width: 200,
        height: 200,
        text: this.originUrl, //二维码内容,可以是一个连接或者单纯的一段文字
    });
// vue
new QRCode(this.$refs.qrcode, {
    text: qrCodeUrl,   //URL地址
    width: 300,
    height: 300,
    colorDark: '#000',    //二维码颜色
    colorLight: "#ffffff"  //背景颜色
});

转载请说明出处内容投诉
CSS教程_站长资源网 » 纯前端实现二维码生成(原生/vue方法)(超简单)

发表评论

欢迎 访客 发表评论

一个令你着迷的主题!

查看演示 官网购买