qrcode.vue-next

qrcode.react的vue版本实现，最开始是ant-design-vue在QRCode组件中完成迁移，此仓库将其剥离出来，不是重复造轮子，而是满足在有使用二维码场景但组件库选型不是ant-design-vue的情况下，能够使用到qrcode.react这一业界优秀实现，感谢qrcode.react与ant-design-vue为开源做出的贡献

在线预览

qrcode.vue-next

安装

1npm install qrcode.vue-next

使用

qrcode.vue-next导出三个组件，支持以SVG或Canvas形式呈现。通常建议使用SVG，因为它更灵活，但Canvas可能更可取。

Canvas

1import QRCode fom 'qrcode.vue-next';
2
3<template>
4  <QRCode value="https://vuejs.org/" />
5</template>

SVG

1import QRCode fom 'qrcode.vue-next';
2
3<template>
4  <QRCode value="https://vuejs.org/" type="svg" />
5</template>

自定义

如果不满足封装的QRCode提供的样式与功能，可以直接导出QRCodeCanvas或QRCodeSVG来使用，并传递所需props，然后就可以自由创造了。

1import QRCode, { QRCodeCanvas, QRCodeSVG } from 'qrcode.vue-next';
2
3const qrcodeProps = {
4  value: 'https://vuejs.org',
5  size: 134,
6  level: 'M',
7  bgColor: 'transparent',
8  fgColor: 'rgba(0, 0, 0, 0.88)',
9  imageSettings: {
10    src: 'https://vuejs.org/images/logo.png',
11    x: undefined,
12    y: undefined,
13    height: 40,
14    width: 40,
15    excavate: true
16  }
17}
18
19<template>
20  <QRCodeCanvas v-bind="qrcodeProps" />
21  <br />
22  <QRCodeSVG v-bind="qrcodeProps" />
23</template>
24

封装后的API，基于antd

参数	类型	默认值	说明
bgColor	string	'transparent'	二维码背景颜色
bordered	boolean	true	是否显示边框
color	string	'#000000'	二维码颜色
errorLevel	'L' | 'M' | 'Q' | 'H'	'L'	二维码纠错等级
icon	string	-	二维码中的图片地址
iconSize	number	40	二维码中图片的大小
iconSettings	object	{x: undefined, y: undefined, excavate: true}	二维码中图片的设置
size	number	160	二维码渲染大小
status	'active' | 'expired' | 'loading' | 'scanned'	'active'	二维码状态
type	'canvas' | 'svg'	'canvas'	渲染类型
value	string	-	扫描后的地址

事件

事件名	说明	回调参数
change	二维码绘制完成时触发	() => void
refresh	点击刷新按钮时触发	() => void

原本的API

prop	type	default value	note
value	string
size	number	128
bgColor	string	"#FFFFFF"	CSS color
fgColor	string	"#000000"	CSS color
level	string ('L' 'M' 'Q' 'H')	'L'
minVersion	number (1-40)	1	QR Code versions are 1-40. The optimal (lowest) version is determined for the value provided, using this minimum as the lower bound.
includeMargin	boolean	false	DEPRECATED. This is being removed in favor of marginSize
marginSize	number	0	Specifies the number of modules to use for margin around the symbol. The QR Code specification requires 4, however you may use other values. Values will be turned to integers with Math.floor. Overrides includeMargin default value when specified
imageSettings	object		See below

imageSettings

field	type	default value	note
src	string
x	number	none	Will attempt to center if not specified
y	number	none	Will attempt to center if not specified
height	number	10% of size
width	number	10% of size
excavate	boolean	false
opacity	number	1

自定义样式

qrcode.vue-next将通过任何附加的道具传递到底层DOM节点（＜svg＞或＜canvas＞）。这允许使用内联“style”或自定义“class”来自定义渲染。一个常见的用途是支持响应式布局。

注意: 为了在高密度显示器上渲染＜canvas＞中的二维码，我们缩放画布元素以包含适当数量的像素，然后使用内联样式进行缩小。我们将合并任何其他样式，自定义的height和width将覆盖我们原本的值。这允许缩放到百分比_but_如果缩放超过size，您将遇到模糊的图像。建议在渲染到＜canvas＞时传递适当的大小.

编码模式

qrcode.vue-next仅支持在单个段中对文本进行编码。所使用的编码库进行最少的检测，以确定所编码的文本是否可以遵循数字或字母数字模式的优化路径，从而允许对更多数据进行编码。否则，它将按照字节模式进行编码。此模式包括支持多字节Unicode字符（如汉字），但不支持优化的汉字编码模式。.