@hzab/schema-descriptions

通过 schema 生成的描述列表组件

组件

示例

import SchemaDes from "@hzab/schema-descriptions";

// testSchema 为 formily 生成的 schema json
<SchemaDes schema={testSchema} data={data} />;

API

InfoPanel Attributes

| 参数 | 类型 | 必填 | 默认值 | 说明 | | ---------- | ------- | ---- | ------ | ------------------------------------------------------------------------------------------- | | schema | Object | 是 | - | 数据信息的 schema | | data | Object | 是 | - | 展示的数据 | | bordered | Boolean | 否 | true | 控制是否显示边框 | | layout | string | 否 | | 布局：horizontal / vertical | | column | number | 否 | 2 | 一行的 DescriptionItems 数量，可以写成像素值或支持响应式的对象写法 { xs: 8, sm: 16, md: 24} | | desConf | Object | 否 | 2 | antd descriptions 的默认配置项 | | Slots | Object | 否 | - | 数据展示的插槽 | | LabelSlots | Object | 否 | - | label 的插槽 |

Slots

• 使用插槽进行内容的自定义渲染
• props:
  • value 处理过后的数据
  • dataVal data 中的实际数据
  • item 当前表单项配置数据

import SchemaDes from "@hzab/schema-descriptions";

// testSchema 中存在 name 为 userName 的字段
<SchemaDes
  schema={testSchema}
  data={data}
  Slots={{
    userName(props) {
      console.log("Slots props", props);
      return "Slots-" + props.value + props.dataVal;
    },
  }}
  LabelSlots={{
    userName(props) {
      console.log("Label props", props);
      return "Label-Slots-" + props.label;
    },
  }}
/>;

组件开发流程

• 在 config/webpack.config.js 中按需修改 alias 配置的包名，便于本地调试
• 在 src/typings.d.ts 中按需修改 declare module 配置的包名，解决 ts 报错问题
• npm run dev

命令

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

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

• 生成文档：npm run docs

• 本地运行：npm run dev

发布

• npm 源和云效源都需要发布

• 命令：npm publish --access public

• 发布目录：

  • src

迭代发布命令-版本自增

• beta: 需要手动修改 package.json 中的 version，添加 -betaX 版本号。使用 npm publish --beta 发布
• 0.0.x: npm run publish-patch
• 0.x.0: npm run publish-minor
• x.0.0: npm run publish-major

nrm

• 安装 npm install -g nrm
• 增加源 nrm add aliyun https://packages.aliyun.com/62046985b3ead41b374a17f7/npm/npm-registry/
• 切换源 nrm use aliyun nrm use npm
• 登录（账号密码在 https://packages.aliyun.com/npm/npm-registry/guide 查看） npm login --registry=https://packages.aliyun.com/62046985b3ead41b374a17f7/npm/npm-registry/

配置

配置文件

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

webpack 配置文件

• config/webpack.config.js