前端使用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 // 容错级别
       });
   },
相关推荐
东东5167 小时前
基于ssm的网上房屋中介管理系统vue
前端·javascript·vue.js
harrain8 小时前
什么!vue3.4开始,v-model不能用在prop上
前端·javascript·vue.js
阿蒙Amon13 小时前
TypeScript学习-第7章:泛型(Generic)
javascript·学习·typescript
睡美人的小仙女12713 小时前
Threejs加载环境贴图报错Bad File Format: bad initial token
开发语言·javascript·redis
fanruitian13 小时前
uniapp android开发 测试板本与发行版本
前端·javascript·uni-app
rayufo14 小时前
【工具】列出指定文件夹下所有的目录和文件
开发语言·前端·python
RANCE_atttackkk14 小时前
[Java]实现使用邮箱找回密码的功能
java·开发语言·前端·spring boot·intellij-idea·idea
摘星编程14 小时前
React Native + OpenHarmony:Timeline垂直时间轴
javascript·react native·react.js
缺点内向14 小时前
C#编程实战:如何为Word文档添加背景色或背景图片
开发语言·c#·自动化·word·.net
一起养小猫14 小时前
Flutter for OpenHarmony 实战:记账应用数据统计与可视化
开发语言·jvm·数据库·flutter·信息可视化·harmonyos