@fescotech/form-designer

表单设计器

基于 fr-generator 的表单设计器，增加移动端设计/预览，同时简化部分功能

安装

npm i -S @fescotech/form-designer --registry http://47.94.139.51:8081/nexus/repository/fescotech-npm/

使用方式

import React from "react";
import Generator from "@fescotech/form-designer";

const defaultValue = {
  type: "object",
  properties: {
    inputName: {
      title: "简单输入框",
      type: "string",
    },
  },
};

const Demo = () => {
  return (
    <div style={{ height: "80vh" }}>
      <Generator defaultValue={defaultValue} />
    </div>
  );
};

export default Demo;

本地开发

没有本地服务器开发模式，因此开发时，本地起一个引用该库的项目，将 form-designer 使用 npm link 到本地 node_modules，在项目中 npm link @fescotech/form-designer 后进行开发调试

API

Props

参数	说明	类型	默认值
hideId	隐藏组件 ID	boolean	false
defaultValue	默认表单 schema	object	DEFAULT_SCHEMA
transformer	schema 双向转换	object	{ fromFormRender, toFormRender }
extraButtons	操作栏按钮	array	extraButton[]
controlButtons	选中项操作按钮	array	controlButton[]
settings	左右侧栏配置	array	defaultSettings
commonSettings	通用配置	object	defaultCommonSettings
globalSettings	全局配置	object	defaultGlobalSettings
widgets	自定义组件	object	{}
mapping	组件和 schema 的映射规则	object	{}

extraButton

属性	说明	类型
text	按钮文案	string
onClick	按钮点击回调函数	(event) => void

数组前四项为布尔值，决定默认按钮是否展示。 支持 antd 按钮组件的所有其他属性 https://ant.design/components/button-cn/#API

controlButton

属性	说明	类型
text	按钮文案	string
onClick	按钮点击回调函数	(event, schema) => void

数组前两项为布尔值或函数，决定默认按钮是否展示，函数入参为选中项 schema。

Events

事件名	说明	回调参数
onChange	表单 data 变化回调	表单的 data
onSchemaChange	表单 schema 变化回调	导出的 schema

Methods

事件名	说明	入参
getValue	获取导出的 schema 值	-
setValue	从外部强制修改 schema	schema
copyValue	将现有 schema 拷贝到剪贴板	-

案例演示

参考fr-generator 示例

常见问题

1、如何控制编辑器高度

给组件外层要包裹的 div 设置高度即可，否则为默认值 min-height: 30vh