1.0.0 • Published 4 months ago
二维码生成器
一款基于 react 的二维码生成器
demo 试用地址：https://qkiroc.github.io/qrcode-react/
安装
npm install qrcode-react-next
使用示例
import {QRCode} from 'qrcode-react-next';
function component() {
return <QRCode value="test" />;
}
配置说明
| 参数 | 类型 | 默认值 | 是否必填 | 说明 |
|---|
| value | string | - | 是 | 二维码的内容 |
| mode | 'svg' | 'canvas' | 'canvas' | 否 | 二维码的渲染模式 |
| config | QRCodeConfig | - | 否 | 二维码的配置，包括纠错级别、版本等 |
| styleConfig | QRCodeStyleConfig | - | 否 | 二维码的样式配置，包括大小、颜色、边距等 |
| logoConfig | QrCodeLogoConfig | - | 否 | 二维码中间的 logo 配置，包括图片路径、宽高等 |
| className | string | - | 否 | 自定义样式类名 |
QRCodeConfig 配置说明
| 参数 | 类型 | 默认值 | 是否必填 | 说明 |
|---|
| level | 'L'|'M'|'Q'|'H' | 'L' | 否 | 纠错级别 |
| minVersion | number | 1 | 否 | 最小版本 |
| maxVersion | number | 40 | 否 | 最大版本 |
| mask | number | - | 否 | 掩码模式（-1~7） |
| boostLevel | boolean | false | 否 | 是否提升纠错级别 |
QRCodeStyleConfig 配置说明
| 参数 | 类型 | 默认值 | 是否必填 | 说明 |
|---|
| size | number | 200 | 否 | 二维码的大小 |
| margin | number | 4 | 否 | 二维码的边距 |
| color | string | '#000000' | 否 | 二维码的颜色 |
| bgColor | string | '#FFFFFF' | 否 | 二维码的背景颜色 |
| eyeType | 'default'| 'rounded' | 'circle' | 'default' | 否 | 码眼的类型 |
| eyeBorderSize | 'default' | 'sm' | 'xs' | 'default' | 否 | 码眼边框的大小 |
| eyeBorderColor | string | - | 否 | 码眼边框的颜色 |
| eyeInnerColor | string | - | 否 | 码眼内部的颜色 |
| pointType | 'default' | 'circle' | 'default' | 否 | 码点的类型 |
| pointSize | 'default' | 'sm' | 'xs' | 'default' | 否 | 码点的大小 |
| pointSizeRandom | boolean | false | 否 | 码点的大小是否随机 |
QrCodeLogoConfig 配置说明
| 参数 | 类型 | 默认值 | 是否必填 | 说明 |
|---|
| src | string | - | 是 | logo 图片的路径 |
| width | number | 二维码大小的 1/5 | 否 | logo 图片的宽度 |
| height | number | 二维码大小的 1/5 | 否 | logo 图片的高度 |
| x | number | 居中 | 否 | logo 图片的 x 坐标 |
| y | number | 居中 | 否 | logo 图片的 y 坐标 |