前端使用qrcodejs2插件实现根据网址生成二维码

实现效果:

实现方法:

1.安装插件

复制代码
npm install --save qrcodejs2

2.可以全局引入,也可以只在使用的vue文件中引入

复制代码
import QRCode from 'qrcodejs2';

3.在vue文件的template中设置放置二维码的div

复制代码
<div id="qrcode"></div>

4.在vue文件中的method中写获取二维码的方法

复制代码
getCode() {
       //    生成二维码
       var qrcode = new QRCode('qrcode', {
           text: 'http://www.baidu.com', // url
           width: 120, // 二维码宽度
           height: 120, // 二维码高度
           colorDark: '#000000', // 前景色
			colorLight: '#ffffff', // 后景色
			correctLevel: QRCode.CorrectLevel.L // 容错级别
       });
   },
相关推荐
亭台烟雨中10 分钟前
【前端记事】关于electron的入门使用
前端·javascript·electron
泯泷24 分钟前
「译」解析 JavaScript 中的循环依赖
前端·javascript·架构
球求了27 分钟前
C++:继承机制详解
开发语言·c++·学习
抹茶san27 分钟前
前端实战:从 0 开始搭建 pnpm 单一仓库(1)
前端·架构
张槊哲1 小时前
函数的定义与使用(python)
开发语言·python
Senar1 小时前
Web端选择本地文件的几种方式
前端·javascript·html
北辰浮光1 小时前
[Mybatis-plus]
java·开发语言·mybatis
烛阴1 小时前
UV Coordinates & Uniforms -- OpenGL UV坐标和Uniform变量
前端·webgl