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

事件

原本的API

imageSettings

自定义样式

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

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

编码模式

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