vue中使用vue-qr生成漂亮的二维码
2020-03-26 本文已影响0人
追梦_life
最近在项目中遇到一个生成二维码的需求，并且二维码上要带上logo和背景。使用qrcode只能单纯的生成二维码，不能带logo及其它一些自定义。
于是便找到了vue-qr这个插件。vue-qr具有自定义二维码背景、logo、实点颜色等等特性，能够生成更炫酷的二维码。
vue-qr是Awesome-qr.js的Vue 2.x组件
安装
npm install vue-qr --save
使用
<template>
<div>
<vue-qr :correctLevel="3" :autoColor="false" colorDark="#313a90" :bgSrc="bgSrc" :logoSrc="logoSrc" :text="codeUrl" :size="95" :margin="0" :logoMargin="3"></vue-qr>
</div>
</template>
<script>
import VueQr from 'vue-qr'
export default {
data () {
return {
logoSrc: require('../assets/img/qrlogo.png'),
bgSrc: require('../assets/img/bgSrc.png'),
codeUrl: 'https://github.com/lx719679895'
}
},
components: {
VueQr
}
}
</script>
参数及说明
基础
| 参数 | 说明 | 必要性 |
|---|---|---|
| text | 二维码内容 | 必需 |
| size | 尺寸, 长宽一致, 包含外边距 | 必需 |
| margin | 二维码图像的外边距, 默认 20px | 可选 |
| dotScale | 数据区域点缩小比例,默认为0.35 | 可选 |
| correctLevel | 容错级别 0-3 | 可选 |
| whiteMargin | 若设为 true, 背景图外将绘制白色边框（默认是true） | 可选 |
| bindElement | 指定是否需要自动将生成的二维码绑定到HTML上（默认是true） | 可选 |
| callback | 生成的二维码 Data URI 可以在回调中取得,第一个参数为二维码 data URL, 第二个参数为 props 传过来的 qid(因为二维码生成是异步的,所以加个 id 用于排序) | 可选 |
可以使用
bindElement来指定要自动填入二维码图像的元素的 ID（不含前导「#」），支持<div>或是<img>。
颜色
| 参数 | 说明 | 必要性 |
|---|---|---|
| colorDark | 实点的颜色 | 可选 |
| colorLight | 空白区的颜色 | 可选 |
| autoColor | 若为 true, 背景图的主要颜色将作为实点的颜色, 即 colorDark,默认 true | 可选 |
若设置了
autoColor，则colorDark和colorLight都将被忽略。
背景图像
| 参数 | 说明 | 必要性 |
|---|---|---|
| bgSrc | 欲嵌入的背景图地址 | 可选 |
| gifBgSrc | 欲嵌入的背景图 gif 地址,设置后普通的背景图将失效。设置此选项会影响性能 | 可选 |
| backgroundColor | 背景色 | 可选 |
| backgroundDimming | 叠加在背景图上的颜色, 在解码有难度的时有一定帮助 | 可选 |
若设定了
gifBackground，则backgroundImage将会被忽略。
logo图像
| 参数 | 说明 | 必要性 |
|---|---|---|
| logoSrc | 嵌入至二维码中心的 LOGO 地址 | 可选 |
| logoScale | 用于计算 LOGO 大小的值, 过大将导致解码失败, LOGO 尺寸计算公式 logoScale(size-2margin), 默认 0.2 | 可选 |
| logoMargin | 标识周围的空白边框, 默认为0 | 可选 |
| logoBackgroundColor | 背景色,需要设置 logo margin | 可选 |
| logoCornerRadius | 标识及其边框的圆角半径, 默认为0 | 可选 |
后处理
| 参数 | 说明 | 必要性 |
|---|---|---|
| binarize | 若为 true, 图像将被二值化处理, 未指定阈值则使用默认值，默认是false | 可选 |
| binarizeThreshold | (0 < threshold < 255) 二值化处理的阈值 | 可选 |
