前端使用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 // 容错级别
       });
   },
相关推荐
webkubor14 小时前
一次前端生产白屏复盘:旧 HTML、Hash 资源和 MIME type text/html
前端·前端工程化
zmzb010314 小时前
C++课后习题训练记录Day179
开发语言·c++
咩咩啃树皮14 小时前
第63篇【终极整合巨作】从零手写原生中后台管理系统|整合62篇全部前端知识点|从头到尾完整架构+全功能逻辑
前端·架构
不正经学生15 小时前
C语言指针进阶:const 和野指针——给指针加锁,向野指针宣战
c语言·开发语言·c++·算法·c#
程序喵大人15 小时前
【C++进阶】STL算法与函数对象 - 01 让算法去处理一段迭代器范围
开发语言·c++·算法·函数对象
cui_ruicheng15 小时前
Python数据分析(十三):Seaborn 统计可视化
开发语言·python·信息可视化·数据分析
得物技术15 小时前
实战从零开始构建一个Coding Agent:Violin |得物技术
javascript·架构·llm
大尚来也15 小时前
HTML5 Web Worker:彻底解决JS阻塞页面卡顿问题
开发语言
Highcharts16 小时前
用Highcharts如何动态向一个序列添加点-示列讲解
前端