vue纯前端生成二维码的方法

最新推荐文章于 2025-04-10 16:47:47 发布

docwangsir

最新推荐文章于 2025-04-10 16:47:47 发布

阅读量741

点赞数

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/docwangsir/article/details/107839945

版权

本文介绍了如何在Vue项目中利用qrcodejs2插件生成二维码。首先通过yarn或npm安装插件，然后可以选择全局或局部引入。在DOM中创建一个div作为二维码容器，并在CSS中设置样式。接着定义生成二维码的函数，在Vue的mounted钩子中调用该函数，即可显示二维码。此外，还展示了如何改变二维码颜色。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

利用qrcode插件

通过yarn 或者Npm的方式 yarn add qrcodejs2 --dev 或者 npm install --save qrcodejs2

安装之后可以选择全局引入Vue项目中（在工程的main.js文件中引入）或者在各个vue文件中引入

import QRCode from 'qrcodejs2'

首先在Dom部分创建一个div

之后写下css(我写的scss 其实都一样没什么区别)

.qrcode{
    display: inline-block;
    img {
        width: 132px;
        height: 132px;
        background-color: #fff; //设置白色背景色
        padding: 6px; // 利用padding的特性，挤出白边
        box-sizing: border-box;
    }
  }

引入之后进行调用，首先创建一个调用函数：

creatQrCode() {
        var qrcode = new QRCode(this.$refs.qrCodeUrl, {
            text: 'xxxx', // 需要转换为二维码的内容
            width: 100,
            height: 100,
            colorDark: '#00FF00',
            colorLight: '#ffffff',
            correctLevel: QRCode.CorrectLeve

最低0.47元/天解锁文章