@hzab/classnames-utils

@hzab/classnames-utils

类名工具

组件

示例

import ClassnamesUtils, { PREFIX_TYPE, NO_PREFIX_TYPE } from "@hzab/classnames-utils";

import style from "./index.module.less";
import "./index.less";

/* 普通 className 添加前缀写法，值为 PREFIX_TYPE 会自动添加前缀 */
const clsU = new ClassnamesUtils({
  prefix: "test",
});

/* react */
<div className={cnu.objCls({ demo: PREFIX_TYPE, ss: true })}> demo </div>
<div className={cnu.getPrefix("demo")}> demo </div>
<div className={cnu.arrPrefix(["demo", "a", "b"])}> demo </div>
<div className={cnu.objPrefix({ demo: true, a: true, b: false, c: true, d: NO_PREFIX_TYPE })}> demo </div>

/* 渲染结果 */
<div class="test-prefix-demo ss"> demo </div>
<div class="test-prefix-demo"> demo </div>
<div class="test-prefix-demo test-prefix-a test-prefix-b"> demo </div>
<div class="test-prefix-demo test-prefix-a test-prefix-c d"> demo </div>

/* css module 写法 */
const clsUS = new ClassnamesUtils({
  prefix: "test",
  style,
});

/* react */
<div className={cnuS.objCls({ demo: PREFIX_TYPE, ss: true })}> demo </div>
<div className={cnuS.getPrefix("demo")}> demo </div>
<div className={cnuS.arrPrefix(["demo", "a", "b"])}> demo </div>
<div className={cnuS.objPrefix({ demo: true, a: true, b: false, c: true, d: NO_PREFIX_TYPE })}> demo </div>

/* 渲染结果 */
<div class="style-prefix-demo_QrUVQR09 ss"> demo </div>
<div class="style-prefix-demo_QrUVQR09"> demo </div>
<div class="style-prefix-demo_QrUVQR09 style-prefix-a_jz0PvdWe style-prefix-b_EwNpt8Ts"> demo </div>
<div class="style-prefix-demo_QrUVQR09 style-prefix-a_jz0PvdWe style-prefix-c_Fol8id_I d"> demo </div></div>

API

InfoPanel Attributes

参数	类型	必填	默认值	说明
prefix	string	否	-	类名统一的前缀
styles	Object	否	-	css module 目标 style

objCls

• 默认不添加前缀
• 添加前缀的项值配置 PREFIX_TYPE: prefix

参数	类型	必填	默认值	说明
classNameObj	Object	是	-	类名数据
opt	Object	否	-	配置对象

objPrefix

• 默认添加前缀
• 不添加前缀的项值配置 NO_PREFIX_TYPE: no-prefix

参数	类型	必填	默认值	说明
classNameObj	Object	是	-	类名数据
opt	Object	否	-	配置对象

组件开发流程

• 在 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