@hzab/schema-descriptions

@hzab/schema-descriptions

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

Tips

• 响应器支持属性响应（标题、字段值、显示/隐藏）@0.0.7
• antd Descriptions 组件样式需要手动引入

组件

示例

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

命令

• 本地运行：npm run dev
• 测试环境打包编译：npm run build-flow-dev
• 生产环境打包编译：npm run build

发布

• 命令：npm publish --access public

• 发布目录：

  • lib

配置

配置文件

• 本地配置文件：config/global-config/config.local.js
• 测试环境配置文件：config/global-config/config.flowDev.js
• 生产环境配置文件：config/global-config/config.production.js

webpack 配置文件

• config/webpack.config.js