【相对靠谱】Vue生成二维码Qrcode，可插入二维码中心logo图标，可以设置二维码颜色大小等属性

你挚爱的强哥

14338人浏览 · 2020-07-22 22:30:32

你挚爱的强哥 · 2020-07-22 22:30:32 发布

效果

代码

npm install vue-qr --save

个别网络用 cnpm install vue-qr --save 安装

<template>
    <div class="sg-qrcode">
        <vueQr
            :text="qrcodeText"
            :correctLevel="3"
            :size="250"
            :margin="10"
            colorDark="#2ba245"
            colorLight="white"
            backgroundColor="white"
            backgroundDimming="white"
            :logoSrc="require('@/assets/login/qrcode-logo.jpg')"
            :logoScale=".2"
            :logoMargin="5"
            logoBackgroundColor="white"
            :callback="qrCallback"
        />
        <h2>请用微信扫码支付</h2>
        <h2>￥<b>{{amount}}</b>元
        </h2>
    </div>
</template>

<script>
    import vueQr from "vue-qr"; //引入二维码生成组件 cnpm install vue-qr --save
    export default {
        components: {
            vueQr //二维码生成组件
        },
        data() {
            return {
                qrcodeText: "舒工请你付款来了", //二维码内容（扫码识别后需要访问的网址）
                amount: 168//金额
            };
        },
        methods: {
            // 二维码生成回调
            qrCallback(qrcodeBase64) {
                console.log(`二维码生成回调`, qrcodeBase64);
            },
        },

    };
</script>

属性说明：

text	编码的内容（支持文字、网址）
correctLevel	容错级别 0-3（容错级别越高，代表遮住二维码部分越多，依然可以识别）
size	尺寸, 长宽一致, 包含外边距（推荐20px）
margin	二维码图像的外边距, 默认20px
colorDark	实点的颜色（默认黑色）
colorLight	空白区的颜色（默认白色）
bgSrc	嵌入的背景图地址（支持png、jpg）
gifBgSrc	欲嵌入的背景图 gif 地址,设置后普通的背景图将失效。设置此选项会影响性能
backgroundColor	背景色（默认白色）
backgroundDimming	叠加在背景图上的颜色, 在解码有难度的时有一定帮助（默认白色）
logoSrc	嵌入至二维码中心的 LOGO 地址（支持png、jpg）
logoScale	用于计算 LOGO 大小的值, 过大将导致解码失败, LOGO 尺寸计算公式 `logoScale(size-2margin)`,（默认 0.2）
logoMargin	LOGO标识周围的空白边框, 默认为0（推荐5px）
logoBackgroundColor	Logo 背景色,需要设置 logo margin（默认白色）
callback	生成二维码后会执行的回调函数（传参是一个Base64的二维码）