前端使用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 // 容错级别
       });
   },
相关推荐
寻星探路2 小时前
【深度长文】万字攻克网络原理:从 HTTP 报文解构到 HTTPS 终极加密逻辑
java·开发语言·网络·python·http·ai·https
崔庆才丨静觅3 小时前
hCaptcha 验证码图像识别 API 对接教程
前端
lly2024063 小时前
Bootstrap 警告框
开发语言
2601_949146534 小时前
C语言语音通知接口接入教程:如何使用C语言直接调用语音预警API
c语言·开发语言
曹牧4 小时前
Spring Boot:如何测试Java Controller中的POST请求?
java·开发语言
passerby60614 小时前
完成前端时间处理的另一块版图
前端·github·web components
KYGALYX4 小时前
服务异步通信
开发语言·后端·微服务·ruby
掘了4 小时前
「2025 年终总结」在所有失去的人中,我最怀念我自己
前端·后端·年终总结
zmzb01034 小时前
C++课后习题训练记录Day98
开发语言·c++
崔庆才丨静觅4 小时前
实用免费的 Short URL 短链接 API 对接说明
前端