Qrcode.vue-next NPM

qrcode.vue-next

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

在线预览

qrcode.vue-next

安装

npm install qrcode.vue-next

使用

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

`Canvas`

import QRCode fom 'qrcode.vue-next';

<template>
  <QRCode value="https://vuejs.org/" />
</template>

`SVG`

import QRCode fom 'qrcode.vue-next';

<template>
  <QRCode value="https://vuejs.org/" type="svg" />
</template>

`自定义`

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

import QRCode, { QRCodeCanvas, QRCodeSVG } from 'qrcode.vue-next';

const qrcodeProps = {
  value: 'https://vuejs.org',
  size: 134,
  level: 'M',
  bgColor: 'transparent',
  fgColor: 'rgba(0, 0, 0, 0.88)',
  imageSettings: {
    src: 'https://vuejs.org/images/logo.png',
    x: undefined,
    y: undefined,
    height: 40,
    width: 40,
    excavate: true
  }
}

<template>
  <QRCodeCanvas v-bind="qrcodeProps" />
  <br />
  <QRCodeSVG v-bind="qrcodeProps" />
</template>

封装后的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＞时传递适当的大小.