Vue生成二维码_vue实现扫描二维码

大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

效果

代码

npm install vue-qr --save

<template>
    <div class="sg-qrcode">
        <vue-qr :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"
        ></vue-qr>
    </div>
</template>

<script>
    import vueQr from "vue-qr"; //引入二维码生成组件
    export default {
        components: {
            vueQr //二维码生成组件
        },
        data() {
            return {
                qrcodeText: "舒工请你付款来了", //二维码内容（扫码识别后需要访问的网址）
                amount: 168//金额
            };
        }
    };
</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-2*margin),（默认 0.2）
logoMargin LOGO标识周围的空白边框, 默认为0（推荐5px）
logoBackgroundColor Logo 背景色,需要设置 logo margin（默认白色）