formily代码结构
2021-08-24 22:34:30 18 举报AI智能生成
formily代码结构
作者其他创作
大纲/内容
输入控件：inputs
布局控件：Layouts
自增控件：Arrays
展示控件：Displays
拖拽组件：Component
大纲树组件：OutlinedTree
历史记录：History
左侧导航栏：CompositePanel.DragSourceWidget
顶部操作：ToolbarPanel
拖拽面板：type=\"DESIGNABLE\"
json树编辑控件：type=\"JSONTREE\"
代码树：type=\"MARKUP\"
表单预览：type=\"PREVIEW\" PreviewWidget
操作区域：ViewportPanel.ViewPanel
中心工作区：Workspace
const node = useCurrentNode(currentWorkspaceId)配置项：node?.designerProps?.propsSchema配置项数据：node?.props渲染配置面板
配置面板：SettingsPanel.SettingsForm
<Form {...formProps} form={form}> <SchemaField schema={schema} /> </Form>
PreviewWidget：核心表单渲染
@formily/core
transformToSchema
@designable/formily
useDesignerconst designer = useDesigner()
@designable/react
@formily/antd
designable/antd/src/schemas
designable/antd/src/sources
获取提交结果：const submit = async (designer: Engine) => { const fr = formRef.formRef.current.getForm(); await fr.validate('dk822gxacmz'); console.log(fr.values) };
保存/提交ActionsWidget.tsx
初始化
配置面板designable/antd/src/schemas
拖拽面板注册designable/antd/src/components/DesignableField/options.ts：import { MtdInput } from '@formily/antd'const SchemaField = createSchemaField({ components: { MtdInput }})
表单注册designable/antd/playground/widgets/PreviewWidget.tsx：import { MtdInput } from '@formily/antd'const SchemaField = createSchemaField({ components: { MtdInput }})
新增组件步骤
main.ts
收藏
收藏
0 条评论
回复 删除
下一页
