前端使用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 // 容错级别
       });
   },
相关推荐
zzzll1111几秒前
深入理解 Java HashMap:从原理到实战
java·开发语言·哈希算法
猫猫不是喵喵.8 分钟前
Java开发高频面试题汇总(通俗易懂版)
java·开发语言·java高频面试
k4m7v2pz15 分钟前
用 rust-verb-shell 重写进程管理:从 game.sh 到 .rvs 的迁移实录
开发语言·后端·rust
2603_9658966217 分钟前
JavaScript 对象零基础详解|属性、方法、遍历、增删改查
开发语言·javascript·ecmascript
dear_bi_MyOnly22 分钟前
数组字符串深度解析:从入门到卡牌实战
开发语言·c++·学习
天道kabuto26 分钟前
踩坑实录:JS Map迭代器为什么“用完即焚”?兼谈技术知识沉淀
前端
正在走向自律26 分钟前
从 Python 基础到大模型落地:读《深入浅出 Python 人工智能》,吃透 AI 工程化 CRUD 实战
开发语言·人工智能·python·机器学习·知识脉络
字节跳动开源30 分钟前
VisActor全新图可视化开源项目:VGraph
前端·设计模式·开源
打呵欠的猫32 分钟前
前端接口超时从 15s 改到动态值后,用户投诉降了 60%——AI 帮我分析出的方案
前端·ai编程
岁月宁静32 分钟前
二、《从零手撸 Agent》 — 聊聊 LLM 的失忆真相
前端·python·agent