0.0.15 • Published 1 year ago

@cqsjjb-formily/embed v0.0.15

Weekly downloads
-
License
-
Repository
-
Last release
1 year ago

@cqsjjb-formily/embed

动态表单嵌入组件

Usage

import React from 'react';
import RendererEmbed from '@cqsjjb-formily/embed';

function Component () {
  // 获取表单实例,用于函数操作
  const [ formily, setFormily ] = React.useState({});
  // 用于跟踪加载状态
  const [ isReady, setIsReady ] = React.useState(false);
  
  React.useEffect(() => {
    if (isReady) {
      // 回填表单数据
      formily.setFieldsValue({});
    }
  }, [ isReady ]);
  
  return (
    <RendererEmbed
      code={/*表单模板ID*/}
      style={/*自定义样式*/}
      width={/*渲染嵌入宽度*/}
      height={/*渲染嵌入高度*/}
      postUrl={/*iframe白名单地址*/}
      onLoad={e => {
        // iframe加载回调
        setFormily(e);
        setIsReady(true);
      }}
      onCallback={e => {
        // iframe操作回调
        if (e.type === 'validateFields') {
          // 输出表单提交字段数据
          console.log(e.output);
        }
      }}
    />
  );
}

props

  1. code: string

    表单模板code,每一个渲染的表单都需要一个模板code,内部会根据code自动查询模板数据。

  2. style: React.CSSProperties

    自定义style

  3. width: number | string

    iframe 宽度

  4. height: number | string

    iframe 高度

  5. postUrl: string

    iframe嵌入访问白名单,需要联系管理员配置当前前端服务域名白名单,若已配置白名单,请传入window.location.origin即可。

  6. onLoad: (option: FormilyInstance) => void;

    iframe嵌入加载状态,完成加载会返回一个表单实例对象,操作对象可以对表单进行控制。

  7. onCallback: (option: FormilyCallback): void;

    表单内部操作回调,可以返回表单验证数据等。

FormilyInstance

  1. initialFormily(): void

    初始化表单嵌入,加载表单模板。

  2. resetFields(fields?: string[]): void;

    重置表单,可传入fields参数指定重置字段。

  3. enabledFields(): void;

    启用表单。

  4. validateFields(fields?: string[]): void;

    验证表单,可传入fields参数指定验证字段。

  5. disabledFields(): void;

    禁用表单。

  6. readonlyFields(state: boolean): void;

    将表单设为只读状态,可以传入state参数控制状态。

  7. setFieldsValue(values: { p: string: any }): void;

    动态设置表单字段数据。

  8. getFieldsValue(fields?: string[]): void;

    获取指定表单字段数据。

FormilyCallback

  1. type: 'getFieldsValue' | 'setFieldsValue' | 'readonlyFields' | 'disabledFields' | 'resetFields' | 'validateFields' | 'changeValues';

    每一种类型对应,FormilyInstance的函数操作。

  2. output: any;

    返回每一种类型对应的返回值。

常见问题

  1. 若出现iframe加载访问错误,需要确定当前前端服务域名是否已配置白名单。
0.0.15

1 year ago

0.0.14

2 years ago

0.0.13

2 years ago

0.0.12

2 years ago

0.0.11

2 years ago

0.0.10

2 years ago

0.0.9

2 years ago

0.0.8

2 years ago

0.0.7

2 years ago

0.0.6

2 years ago

0.0.5

2 years ago

0.0.4

2 years ago

0.0.3

2 years ago

0.0.2

2 years ago

0.0.1

2 years ago