vue生成二维码插件---QRCode

最新推荐文章于 2026-06-01 14:34:43 发布

转载最新推荐文章于 2026-06-01 14:34:43 发布 · 422 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

原文链接：https://www.cnblogs.com/cuixiaozhen/p/9872307.html

收录于

vue插件

当前文章被收录于：

vue插件

0 篇文章 0 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

本文介绍QRCode.js，一个用于生成二维码的JavaScript库。通过npm安装并导入库，在组件中创建DOM元素作为二维码的存放位置，使用QRCode构造函数生成指定大小、容错级别的二维码。文中详细解释了如何在Vue组件的mounted生命周期钩子中调用生成二维码的方法。

AI 驱动代码审查实战

Claude code-review 插件深度解析，把 AI 智能审查接进 CI/CD 流水线

一键订阅

QRCode.js是什么？

QRCode.js是用于制作二维码的JavaScript库

安装

npm i qrcodejs2

在需要使用的组件中引入

import QRCode from 'qrcodejs2'

创建DOM元素，存储二维码的位置

<div id="qrcode" ref="qrcode"></div>

生成二维码的方法

qrcode() {
   let qrcode = new QRCode('qrcode', {
       width: 132,  
       height: 132,
       text:'https://www.baidu.com/', // 二维码数据
       correctLevel : QRCode.CorrectLevel.M //容错级别 容错级别有：（1）QRCode.CorrectLevel.L （2）QRCode.CorrectLevel.M （3）QRCode.CorrectLevel.Q （4）QRCode.CorrectLevel.H
   })
},