组件模板
- node@14.21
- new DataModel() hooks 写法时,注意避免 hooks 重复创建实例,导致 query 丢失
- 非动态 query 参数使用 modelParams 参数直接自动生成 model。query 中的值必须是实例化的时候就存在(不支持动态 query 参数)。
- 动态 query 参数使用 useDataModel(); 生成 model。query 允许自行配置监听的动态参数
import { useDataModel } from "@hzab/data-model";
import Demo from "@hzab/list-render-mobile";
// 使用 modelParams 参数实例化 DataModel,不支持动态参数
function Test() {
const modelParams = {
getListApi: "/getList",
query: { orgId: getUrlParam("orgId") },
};
return <Demo modelParams={modelParams} />;
}
// 使用 useDataModel 实例化 DataModel,支持动态参数
function Test2({ orgId }) {
const model = useDataModel(
{
getListApi: "/getList",
query: { orgId },
},
[orgId],
);
return <Demo model={model} />;
}
参数 | 类型 | 必填 | 默认值 | 说明 |
---|---|---|---|---|
model | Object | 是 | - | 数据模型,包含 CURD 接口信息,传入 DataModel 的实例 |
modelParams | Object | 否 | - | 不支持动态参数。传入 DataModel 的的参数,内部自动创建 Model 实例。 |
schema | Object | - | 数据信息的 schema | |
listData | Array | 否 | - | 本地列表数据 |
closeAutoRequest | Boolean | false | 是否关闭加载完毕后自动发起请求。true 时组件 didMount 不自动发起请求 | |
idKey | string | 否 | id | 唯一值字段的 key |
ItemRender | Function | - | 子项渲染组件 | |
virtualized | Boolean | false | 是否启用虚拟滚动 | |
listHeight | number | - | 列表高度,优先级大于 isAutoHeight 计算的高度 | |
isAutoHeight | Boolean | false | 是否自动计算高度(视窗到列表顶部的距离,clientHeight - boxRec.top) | |
rowHeight | number | 10 | 启用虚拟滚动时,每行的高度(单位:像素,优先级高于 pageRow) | |
pageRow | number | 10 | 启用虚拟滚动时,每页显示的行数 |
- 在 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
- config/webpack.config.js