@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
命令
- 本地运行：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