Vue生成二维码插件QRcode

最新推荐文章于 2026-07-13 15:19:54 发布

原创最新推荐文章于 2026-07-13 15:19:54 发布 · 1.3k 阅读

3 ·

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

收录于

vue

当前文章被收录于：

vue

13 篇文章 0 人学习

订阅专栏查看详情

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

本文详细介绍了如何使用qrcodejs2插件在前端页面生成二维码，包括安装、引入和使用方法。通过设置参数，可以自定义二维码的大小、颜色及包含的链接。

一、安装

在命令行中输入一下命令安装二维码插件：

npm install qrcodejs2 --save

需要注意的是，这里安装的是qrcodejs2而不是qrcode ，因为安装qrcode会报错。

二、引入

在需要的页面引入QRcode插件：

import QRCode from 'qrcodejs2'

三、使用

html部分：

<div id="qrcode_box"></div>

js部分：

Qrcode(){
    let qrcode = new QRCode('qrcode_box', {
        width: 200, //二维码的宽度
        height: 200,//二维码的高度
        text: 'https://www.baidu.com', // 二维码地址
        colorDark : "#000",//二维码颜色
        colorLight : "#fff",//二维码背景颜色
    })
},

//调用方法（在需要的地方调用）
this.Qrcode()

标签

#vue #qrcode #二维码 #js