@hzab/qrcode

二维码生成组件

• [email protected]

组件

示例

import QRCode from "@hzab/qrcode";

<QRCode value={"123456789"} />;

设置 Logo

import QRCode from "@hzab/qrcode";

const BLACK_COLOR = "#000";
const RED_COLOR = "#f00";

let color = RED_COLOR;

export const SetColorDemo = (props) => {
  return (
    <QRCode
      value={"https://abt.hzabjt.com/d?uId=111111&eId=2222222&tId=3333333"}
      logo="https://abt2023-open.oss-cn-hangzhou.aliyuncs.com/assets/imgs/app/logo.png"
    />
  );
};

点击切换颜色

import { useRef } from "react";
import QRCode from "@hzab/qrcode";

const BLACK_COLOR = "#000";
const RED_COLOR = "#f00";

export const SetColorDemo = (props) => {
  const colorRef = useRef(RED_COLOR);
  return (
    <QRCode
      value={"https://abt.hzabjt.com/d?uId=111111&eId=2222222&tId=3333333"}
      config={{ color: { dark: colorRef.current } }}
      onClick={(e, qrCodeDrawing) => {
        // 在黑色和红色中切换
        colorRef.current = colorRef.current !== BLACK_COLOR ? BLACK_COLOR : RED_COLOR;
        qrCodeDrawing.setCodeColor(colorRef.current);
      }}
    />
  );
};

API

InfoPanel Attributes

| 参数 | 类型 | 必填 | 默认值 | 说明 | | ----------- | ------- | ---- | ------ | ---------------------------- | | value | string | 是 | - | 二维码的信息值 | | hasPreview | boolean | 否 | - | 是否支持点击预览 | | previewConf | Object | 否 | - | 点击预览组件配置 | | codeConf | Object | 否 | - | 二维码 qrcode 组件特有配置项 | | config | Object | 否 | - | 二维码绘制相关配置项 | | logo | string | 否 | - | logo 地址 | | logoConf | Object | 否 | - | logo 配置项 | | topTexts | Array | 否 | - | 二维码顶部文案数组 | | bottomTexts | Array | 否 | - | 二维码底部文案数组 |

config

• 包括了 qrcode 组件的参数

| 参数 | 类型 | 必填 | 默认值 | 说明 | | -------------------- | -------- | ---- | --------- | ---------------------------------------------------------------------------- | | width | number | 否 | 200 | 二维码宽度，如果宽度太小而无法包含 qr 符号，则该选项将被忽略。优先于 scale。 | | margin | number | 否 | 0 | 二维码图片白边大小 | | color | Object | 否 | | 颜色配置 | | color.dark | string | 否 | #000000ff | 深色模块（二维码）的颜色。值必须采用十六进制格式 | | color.light | string | 否 | #ffffffff | 浅色模块（背景）的颜色。值必须采用十六进制格式 | | scale | number | 否 | 4 | 比例因子。值为 1 表示每个模块 1px(黑点) | | small | boolean | 否 | false | 仅与终端渲染器相关。输出较小的二维码 | | version | number | 否 | - | 二维码版本，如果未指定，将计算更合适的值 | | errorCorrectionLevel | string | 否 | M | 纠错级别，可能的值为 low, medium, quartile, high 或 L, M, Q, H | | maskPattern | number | 否 | - | 用于屏蔽符号的屏蔽图案。可能的值为 0 、 1 、 2 、 3 、 4 、 5 、 6 、 7 。 | | toSJISFunc | Function | 否 | - | 内部使用辅助函数将汉字转换为其 Shift JIS 值。如果您需要支持汉字模式。 | | fontSize | number | 否 | - | 字体大小 | | fillStyle | string | 否 | M | 文本颜色 | | padding | number | 否 | - | 绘制的边距 |

logoConf

| 参数 | 类型 | 必填 | 默认值 | 说明 | | ------------ | ------- | ---- | ------ | ------------------------------------------------------------------------------------- | | logoSize | number | 否 | 0.2 | logo 大小，与 二维码 宽度 的比例 | | borderSize | number | 否 | 0.05 | 边框宽度，与 二维码 宽度 的比例 | | borderColor | string | 否 | - | 边框颜色 | | bgColor | string | 否 | - | 背景颜色 | | borderRadius | number | 否 | - | 边框圆角 | | logoRadius | number | 否 | - | logo 圆角 | | crossOrigin | string | 否 | - | 图片跨域配置 https://developer.mozilla.org/zh-CN/docs/Web/HTML/Attributes/crossorigin | | hasPreview | boolean | 否 | false | 是否支持点击预览 |

topTexts/bottomTexts

• 支持传文本数组或对象数组。对象数组支持配置各行文字样式
  • textBaseline?: "top" | "hanging" | "middle" | "alphabetic" | "ideographic" | "bottom";
  • fillStyle?: string;
  • fontSize?: number;
  • padding?: number;

组件开发流程

• 在 config/webpack.config.js 中按需修改 library 配置的文件名
• 在 config/webpack.config.js 中按需修改 alias 配置的包名，便于本地调试
• 在 tsconfig.json 中按需修改 paths 配置的包名，解决 ts 报错问题
• npm run dev

文件目录

• example 本地开发测试代码
• src 组件源码
• lib 组件打包编译后的代码

命令

• Mac 执行该命令，设置 pre-commit 为可执行文件

  • npm run mac-chmod
  • chmod +x .husky && chmod +x .husky/pre-commit

• 生成文档：npm run docs

• 本地运行：npm run dev

• 打包编译：npm run build

发布

• 注意：示例代码生效，但发布之后未生效。确认是否执行了编译！！！

• 编译组件：npm run build

• 命令：npm publish --access public

• 发布目录：

  • lib
  • src

配置

配置文件

• 本地配置文件：config/config.js

webpack 配置文件

• config/webpack.config.js