0.2.7 • Published 1 year ago
@fescotech/form-designer v0.2.7
表单设计器
基于 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 拷贝到剪贴板 | - |
案例演示
常见问题
1、如何控制编辑器高度
给组件外层要包裹的 div 设置高度即可，否则为默认值 min-height: 30vh