【Vue】在 vue 2 中使用 qrcodejs2 生成二维码

最新推荐文章于 2025-05-07 21:15:48 发布

原创

最新推荐文章于 2025-05-07 21:15:48 发布 · 231 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端 #ecmascript #前端框架

本文介绍了如何使用qrcodejs2插件在Vue项目中生成二维码。首先通过npm安装库，然后在代码中导入并配置，包括设置二维码的宽度、高度、颜色等属性。接着在HTML中创建一个容器，并在Vue的`mounted`生命周期钩子中调用创建二维码的函数，确保DOM已经渲染完成。最后给出了参考文章链接。

安装

npm install qrcodejs2

导入

import QRCode from 'qrcodejs2'

配置

vue

编写html，必须需要一个盒子包裹放二维码的div

<div class="wrapper">
            <div id="qrcode_box" ref="qrCodeUrl"></div>
          </div>

在methods中建立配置函数

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