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

编码模式

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