Vue前端生成二维码（qrcode）

呈两面包夹芝士

已于 2022-03-29 17:23:02 修改

阅读量7.2k

点赞数

分类专栏： Vue2.0 文章标签： qrcodejs2 二维码生成 JavaScript 前端开发 Qrcode

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

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

版权

Vue2.0 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

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;
    }
}