自定义 formily表单组件核心步骤

  1. 实现 Formily桥接 UI组件
  2. 实现 Behavior属性配置，createBehavior�
    1. 组件属性配置，createFieldSchema�
  3. 实现 Resource资源配置，createResource�

formily 组件业务模型

  1. 定义组件
  2. 引入 schemas 模型
  3. 引入 locales多语言，针对国内用户，可以忽略 ```tsx import type React from ‘react’ import { Submit as FormilySubmit } from ‘@formily/antd’ import { createBehavior, createResource } from ‘@designable/core’ import type { DnFC } from ‘@designable/react’ import { createFieldSchema } from ‘../Field’ import { AllSchemas } from ‘../../schemas’ import { AllLocales } from ‘../../locales’

export const Submit: DnFC> = FormilySubmit

  2. 桥接的自定义表单组件位置，components/<br />先找个组件复制一下，然后重命名组件，不要和已有的组件重名
  4. - Submit.Behavior
  5. - Submit.Resource
  7. ![image.png](https://cdn.nlark.com/yuque/0/2023/png/112859/1672843505168-03c232d3-5957-43fb-abfb-35065ca754a3.png#averageHue=%232d2c2b&clientId=ud63acbf0-01c6-4&from=paste&height=284&id=QDCvC&originHeight=928&originWidth=1736&originalType=binary&ratio=1&rotation=0&showTitle=false&size=159491&status=done&style=none&taskId=uc844b931-d556-473c-814a-5e83275a399&title=&width=530.9985656738281)
  10. <a name="bGhIa"></a>
  11. ### createDesigner 注册组件
  12. 左侧�面板，`<CompositePanel>` 注册自定义的组件�
  13. ```tsx
  14. import { Submit } from './components'
  16. // sources注册组件
  17. <ResourceWidget
  18.   title="sources.Displays"
  19.   sources={[Text, Tree, Submit]}
  20. />
  22. function App() {
  23.   return (
  24.     <Designer engine={engine}>
  25.       <StudioPanel
  26.         logo={<LogoWidget/>}
  27.         actions={<ActionsWidget/>}
  28.       >
  29.         <CompositePanel>
  30.           <CompositePanel.Item
  31.             title="原子组件" // panels.Component
  32.             icon="Component"
  33.           >
  34.                 <ResourceWidget
  35.               title="sources.Displays" // 展示组件
  36.               sources={[Text, Tree, Submit]}
  37.             />
  38.           </CompositePanel.Item>
  39.         </CompositePanel>
  40.     </Designer>
  41.   )
  42. }

Behavior�

  1. Submit.Behavior = createBehavior({
  2.   name: 'Submit',
  3.   extends: ['Field'],
  4.   selector: (node: any) => node.props['x-component'] === 'Submit',
  5.   designerProps: {
  6.     propsSchema: createFieldSchema(AllSchemas.Submit),
  7.   },
  8.   designerLocales: AllLocales.Submit,
  9. })

createBehavior�

  1. Submit.Behavior = createBehavior({
  2.   name: '组件名字',
  3.   extends: ['Field'],
  4.   selector: (node: any) => node.props['x-component'] === 'Submit',
  5.   designerProps: {
  6.     propsSchema: {}
  7.   },
  8.   designerLocales: {}
  9. });

propsSchema 组件属性

就是右侧，属性配置，可以展示的字段

designerLocales 多语言

就是对 API 字段的说明

  1. export const Submit = {
  2. 'zh-CN': {
  3.   title: '提交',
  4.   settings: {
  5.     'x-component-props': {
  6.       type: {
  7.         title: '按钮类型',
  8.         dataSource: [
  9.           'primary',
  10.           'link',
  11.           'text',
  12.           'ghost',
  13.           'dashed',
  14.           'default',
  15.         ],
  16.       },
  17.       autoClearSearchValue: {
  18.         title: '选中自动清除',
  19.         tooltip: '仅在多选或者标签模式下支持',
  20.       },
  21.       defaultActiveFirstOption: '默认高亮第一个选项',
  22.       dropdownMatchSelectWidth: {
  23.         title: '下拉菜单和选择器同宽',
  24.         tooltip:
  25.           '默认将设置 min-width，当值小于选择框宽度时会被忽略。false 时会关闭虚拟滚动',
  26.       },
  27.       defaultOpen: '默认展开',
  28.       filterOption: '选项筛选器',
  29.       filterSort: '选项排序器',
  30.       labelInValue: {
  31.         title: '标签值',
  32.         tooltip:
  33.           '是否把每个选项的 label 包装到 value 中，会把 Select 的 value 类型从 string 变为 { value: string, label: ReactNode } 的格式',
  34.       },
  35.       listHeight: '弹窗滚动高度',
  36.       maxTagCount: {
  37.         title: '最多标签数量',
  38.         tooltip: '最多显示多少个 tag，响应式模式会对性能产生损耗',
  39.       },
  40.       maxTagPlaceholder: {
  41.         title: '最多标签占位',
  42.         tooltip: '隐藏 tag 时显示的内容',
  43.       },
  44.       maxTagTextLength: '最多标签文本长度',
  45.       showArrow: '显示箭头',
  46.       virtual: '开启虚拟滚动',
  47.     },
  48.   },
  49. },
  51. 'en-US': {
  52.   title: 'Submit',
  53.   settings: {
  54.     'x-component-props': {
  55.       mode: {
  56.         title: 'Mode',
  57.         dataSource: ['Multiple', 'Tags', 'Single'],
  58.       },
  59.       autoClearSearchValue: {
  60.         title: 'Auto Clear Search Value',
  61.         tooltip: 'Only used to multiple and tags mode',
  62.       },
  63.       defaultActiveFirstOption: 'Default Active First Option',
  64.       dropdownMatchSelectWidth: 'Dropdown Match Select Width',
  65.       defaultOpen: 'Default Open',
  66.       filterOption: 'Filter Option',
  67.       filterSort: 'Filter Sort',
  68.       labelInValue: 'label InValue',
  69.       listHeight: 'List Height',
  70.       maxTagCount: 'Max Tag Count',
  71.       maxTagPlaceholder: {
  72.         title: 'Max Tag Placeholder',
  73.         tooltip: 'Content displayed when tag is hidden',
  74.       },
  75.       maxTagTextLength: 'Max Tag Text Length',
  76.       showArrow: 'Show Arrow',
  77.       virtual: 'Use Virtual Scroll',
  78.     },
  79.   },
  80. }
  81. }

Resource�

icon图标

  • 字符串，已注册的 svg名字
  • svg标签
  1. Submit.Resource = createResource({
  2.   icon: 'SubmitSource',
  3.   elements: [
  4.     {
  5.       componentName: 'Field',
  6.       props: {
  7.         title: 'Submit',
  8.         'x-decorator': 'FormItem',
  9.         'x-component': 'Submit',
  10.       },
  11.     },
  12.   ],
  13. })

icon 图标

icon 图标组件路径，designable/packages/react/src/icons
image.png

createFieldSchema� 组件属性

组件属性配置，就是 antd组件的 API支持的属性

  • type: ‘object’
  • properties: {}

image.png

  1. import type { ISchema } from '@formily/react'
  3. export const Submit: ISchema = {
  4.   type: 'object',
  5.   properties: {
  6.     mode: {
  7.       type: 'string',
  8.       enum: ['multiple', 'tags', null],
  9.       'x-decorator': 'FormItem',
  10.       'x-component': 'Radio.Group',
  11.       'x-component-props': {
  12.         defaultValue: null,
  13.         optionType: 'button',
  14.       },
  15.     },
  16.     allowClear: {
  17.       type: 'boolean',
  18.       'x-decorator': 'FormItem',
  19.       'x-component': 'Switch',
  20.     },
  21.     autoClearSearchValue: {
  22.       type: 'boolean',
  23.       'x-decorator': 'FormItem',
  24.       'x-component': 'Switch',
  25.       'x-component-props': {
  26.         defaultChecked: true,
  27.       },
  28.     },
  29.     dropdownMatchSelectWidth: {
  30.       type: 'boolean',
  31.       'x-decorator': 'FormItem',
  32.       'x-component': 'Switch',
  33.       'x-component-props': {
  34.         defaultChecked: true,
  35.       },
  36.     },
  37.     autoFocus: {
  38.       type: 'boolean',
  39.       'x-decorator': 'FormItem',
  40.       'x-component': 'Switch',
  41.     },
  42.     bordered: {
  43.       type: 'boolean',
  44.       'x-decorator': 'FormItem',
  45.       'x-component': 'Switch',
  46.       'x-component-props': {
  47.         defaultChecked: true,
  48.       },
  49.     },
  50.     defaultActiveFirstOption: {
  51.       type: 'boolean',
  52.       'x-decorator': 'FormItem',
  53.       'x-component': 'Switch',
  54.       'x-component-props': {
  55.         defaultChecked: true,
  56.       },
  57.     },
  58.     defaultOpen: {
  59.       type: 'boolean',
  60.       'x-decorator': 'FormItem',
  61.       'x-component': 'Switch',
  62.     },
  63.     labelInValue: {
  64.       type: 'boolean',
  65.       'x-decorator': 'FormItem',
  66.       'x-component': 'Switch',
  67.     },
  68.     showArrow: {
  69.       type: 'boolean',
  70.       'x-decorator': 'FormItem',
  71.       'x-component': 'Switch',
  72.     },
  73.     showSearch: {
  74.       type: 'boolean',
  75.       'x-decorator': 'FormItem',
  76.       'x-component': 'Switch',
  77.     },
  78.     virtual: {
  79.       type: 'boolean',
  80.       'x-decorator': 'FormItem',
  81.       'x-component': 'Switch',
  82.       'x-component-props': {
  83.         defaultValue: true,
  84.       },
  85.     },
  86.     filterOption: {
  87.       type: 'boolean',
  88.       'x-decorator': 'FormItem',
  89.       'x-component': 'ValueInput',
  90.       'x-component-props': {
  91.         include: ['BOOLEAN', 'EXPRESSION'],
  92.       },
  93.     },
  94.     filterSort: {
  95.       type: 'boolean',
  96.       'x-decorator': 'FormItem',
  97.       'x-component': 'ValueInput',
  98.       'x-component-props': {
  99.         include: ['EXPRESSION'],
  100.       },
  101.     },
  102.     listHeight: {
  103.       type: 'number',
  104.       'x-decorator': 'FormItem',
  105.       'x-component': 'NumberPicker',
  106.       'x-component-props': {
  107.         defaultValue: 256,
  108.       },
  109.     },
  110.     maxTagCount: {
  111.       type: 'number',
  112.       'x-decorator': 'FormItem',
  113.       'x-component': 'NumberPicker',
  114.     },
  115.     maxTagPlaceholder: {
  116.       type: 'string',
  117.       'x-decorator': 'FormItem',
  118.       'x-component': 'Input',
  119.     },
  120.     maxTagTextLength: {
  121.       type: 'number',
  122.       'x-decorator': 'FormItem',
  123.       'x-component': 'NumberPicker',
  124.     },
  125.     notFoundContent: {
  126.       type: 'string',
  127.       'x-decorator': 'FormItem',
  128.       'x-component': 'Input',
  129.       'x-component-props': {
  130.         defaultValue: 'Not Found',
  131.       },
  132.     },
  133.     placeholder: {
  134.       type: 'string',
  135.       'x-decorator': 'FormItem',
  136.       'x-component': 'Input',
  137.     },
  139.     size: {
  140.       type: 'string',
  141.       enum: ['large', 'small', 'middle', null],
  142.       'x-decorator': 'FormItem',
  143.       'x-component': 'Select',
  144.       'x-component-props': {
  145.         defaultValue: 'middle',
  146.       },
  147.     },
  148.   },
  149. }

schemas� 组件模型

locales� 多语言