Vue - 详细介绍vue-qr在线生成二维码组件（Vue2 Vue3）

Vue - 详细介绍vue-qr在线生成二维码组件（Vue2 & Vue3）

在对于二维码生成中有许多组件，下面介绍关于自定义比较高的vue-qr组件，能自定义设置背景颜色、背景图片、背景Gif图、实点和空白区的颜色、中心Logo的图片和边距。

一、安装

npm install vue-qr --save

二、组件内引用VueQr

# Vue2 
import VueQr from "vue-qr";
export default {components: {VueQr},
};# Vue3
import vueQr from 'vue-qr/src/packages/vue-qr.vue'

三、如何使用

1.创建简易二维码：

<template><vue-qrtext="https://www.baidu.com/":size="200"></vue-qr>
</template>

2.修改实点颜色(colorDark)和空白区颜色(colorLight)：

注意：空白区颜色如果高于实点颜色，则实点颜色和空白区颜色互换！

<template><vue-qrcolorDark="#EE6779"  colorLight="#F5E1D9" text="https://www.baidu.com/":size="200"></vue-qr>
</template>

3.添加背景图片：

注意：出现实点挡住背景无法显示完全，可通过调整dotScale大小和correctLevel来让背景图显示完全！

<template><vue-qr :size="200" :bgSrc="image" :correctLevel="2"  :dotScale="0.5" text="https://blog.csdn.net/miaomiaowins"></vue-qr>
</template># Vue2
<script>
import VueQr from "vue-qr";
export default {data() {return {image: require("../assets/bg.jpg"),};},components: {VueQr,},
};
</script># Vue3
<script setup>
import vueQr from 'vue-qr/src/packages/vue-qr.vue'
const image = new URL('./assets/bg.jpg', import.meta.url).href
</script>

4.添加GIF背景图片：

注意：添加Gif背景会影响性能，导致图片生成时间增加

<template><vue-qr :size="200" :gifBgSrc="gifImage" :correctLevel="2"  :dotScale="0.5" text="https://blog.csdn.net/miaomiaowins"></vue-qr>
</template># Vue2
<script>
import VueQr from "vue-qr";
export default {data() {return {gifImage: require("../assets/bg.gif"),};},components: {VueQr,},
};
</script># Vue3
<script setup>
import vueQr from 'vue-qr/src/packages/vue-qr.vue'
const gifImage= new URL('./assets/bg.gif', import.meta.url).href
</script>

5.放置中心Logo图标：

<template><vue-qr :bgSrc="image":dotScale="0.5":correctLevel="2"text="Hello world!":logoSrc="logoSrc":size="200"></vue-qr>
</template># Vue2
<script>
import VueQr from "vue-qr";
export default {data() {return {image: require("../assets/bg.jpg"),logoSrc: require("../assets/logo_1.png"),};},components: {VueQr,},
};
</script># Vue3
<script setup>
import vueQr from 'vue-qr/src/packages/vue-qr.vue'
const image = new URL('./assets/bg.jpg', import.meta.url).href
const logoSrc = new URL('./assets/logo_1.png', import.meta.url).href
</script>

四、属性介绍

名称	说明
text	编码的内容
correctLevel	Correct Level 0-3 容错级别 0-3
size	二维码尺寸, 长宽一致, 包含外边距
margin	二维码图像的外边距, 默认 20px
colorDark	实点的颜色
colorLight	空白区的颜色
components	阅读 ComponentOptions 了解更多信息。
bgSrc	欲嵌入的背景图地址
gifBgSrc	欲嵌入的背景图 gif 地址,设置后普通的背景图将失效。设置此选项会影响性能
backgroundColor	背景色
backgroundDimming	叠加在背景图上的颜色, 在解码有难度的时有一定帮助
logoSrc	嵌入至二维码中心的 LOGO 地址
logoScale	用于计算 LOGO 大小的值, 过大将导致解码失败, LOGO 尺寸计算公式 logoScale*(size-2*margin), 默认 0.2
logoMargin	LOGO 标识周围的空白边框, 默认为0
logoBackgroundColor	背景色,需要设置 logo margin（经过测试证明无效）
logoCornerRadius	LOGO 标识及其边框的圆角半径, 默认为0
whiteMargin	若设为 true, 背景图外将绘制白色边框
dotScale	数据区域点缩小比例 (0 < scale < 1.0),默认为1
autoColor	背景图的主要颜色将作为实点的颜色, 即 colorDark,默认 true
binarize	图像将被二值化处理, 未指定阈值则使用默认值
binarizeThreshold	二值化处理的阈值(0 < threshold < 255) ，默认值128
callback	生成的二维码 Data URI 可以在回调中取得,第一个参数为二维码 data URL, 第二个参数为 props 传过来的 qid(因为二维码生成是异步的,所以加个 id 用于排序)
bindElement	指定是否需要自动将生成的二维码绑定到HTML上, 默认是true

callback方法：

<vue-qr text="Hello world!" :callback="test" qid="testid"></vue-qr>

export default {methods:{test(dataUrl,id){console.log(dataUrl, id)}}
}

以上是对vue-qr组件的详细介绍，针对于设置中心点logo背景颜色失效的问题，猜测应该是组件版本问题，对于高自定义的在线生成二维码组件有兴趣的小伙伴们，可以尝试一下，对于需要用到动态二维码生成扫描的项目是有一些帮助的！

参考链接：
Awesome-qr.js：Awesome-qr.js
vue-qr：vue-qr项目地址