@hzab/list-render-mobile

组件模板

• [email protected]

组件

注意事项

• 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} />;
}

API

InfoPanel Attributes

| 参数 | 类型 | 必填 | 默认值 | 说明 | | ---------------- | -------- | ---- | ------ | ------------------------------------------------------------------- | | model | Object | 是 | - | 数据模型，包含 CURD 接口信息，传入 DataModel 的实例 | | modelParams | Object | 否 | - | 不支持动态参数。传入 DataModel 的的参数，内部自动创建 Model 实例。 | | schema | Object | | - | 数据信息的 schema | | list | 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

webpack 配置文件

• config/webpack.config.js