Vue前端生成二维码（qrcode）

转载已于 2022-03-29 17:23:02 修改 · 7.4k 阅读

9 ·

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

原文链接：https://www.cnblogs.com/belongs-to-qinghua/p/12197878.html

标签

#前端 #vue.js #javascript

收录于

于 2022-03-14 15:53:17 首次发布

Vue2.0 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了如何通过qrcodejs2库在前端创建二维码，包括安装步骤、代码引用和使用方法，还提供了美化样式示例。适合前端开发者学习和实践基础二维码生成技术。

1.首先安装qrcode

npm install --save qrcodejs2

2.引用

import QRCode from 'qrcodejs2'

3.使用

<div class="qrcode" ref="qrCodeUrl"></div>
 
<script>
methods: {
    creatQrCode() {
        var qrcode = new QRCode(this.$refs.qrCodeUrl, {
            text: 'xxxx', // 需要转换为二维码的内容
            width: 100,
            height: 100,
            colorDark: '#000000',
            colorLight: '#ffffff',
            correctLevel: QRCode.CorrectLevel.H
        })
    },
},
mounted() {
    this.creatQrCode();
},
</script>

4.添加样式美化

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