f-render | 基于 ElementUI 的表单设计器

!npm bundle size
!npm
!gitub pages

- 交流群
- 介绍
- 注意
- 特性
- Demo
- 教程
- 1 分钟快速接入
- 第 1 步：安装
- 第 2 步：注册
- 第 3 步：使用
- 用户模式
- 基于 f-render 的配置
- 基于 vue-ele-form 的配置
- 定制化
- 新增官方扩展组件（以富文本扩展为例）
- 安装组件
- 注册组件
- 配置属性
- 新增自定义组件
- 创建组件并全局注册
- 书写配置
- 合并配置并传入
- 定制化原组件配置 & 表单配置
- 定制化右侧 Tabs
- 样式定制化
- 二次开发
- f-render 问答集锦
- Props 说明
- 插槽
- 生态
- 特别感谢赞助者
- Contributors ✨

交流群

!交流群

介绍

f-render 是基于 vue-ele-form 开发的可视化表单设计工具, 适用于 各种流程引擎和动态表单项目，大大节省你的开发时间；


注意

注意，此设计器不是独立存在的，是依托于 vue-ele-form，在使用前请务必阅读 vue-ele-form 的文档。

特性

- 组件方式：以组件方式接入，1 分钟轻松接入；
- 体积小：Gzip 压缩后 100k 左右；
- 易扩展：可以在不更改源码的情况下增删改属性、组件；

Demo

https://dream2023.gitee.io/f-render/

教程

虽然 f-render 可以做到在不更改源码的情况下实现大量的定制化，但是依然有不少人希望能够根据公司的需求进行二次开发。

所以我推出了一个从 0 实现整个项目的 教程，如果感兴趣 f-render 的实现过程和思考，可以点击 从 0 实现可视化表单组件 进行学习。

1 分钟快速接入

#### 第 1 步：安装

``bash
yarn add element-ui # npm install element-ui -S
yarn add vue-ele-form # npm install vue-ele-form -S
yarn add f-render # npm install f-render -S
`

#### 第 2 步：注册

`js
// vue-ele-form 的注册可参考：https://www.yuque.com/chaojie-vjiel/vbwzgu/xl46cd
import EleForm from "vue-ele-form";
import FRender from "f-render";
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";

Vue.use(ElementUI);
Vue.use(EleForm);
Vue.component("f-render", FRender);
`

#### 第 3 步：使用

`html



`

用户模式

我们把动态表单分为两个阶段：

- 首先是设计阶段：通过拖拽设计表单；
- 然后是用户阶段：将设计好的表单以纯表单的形式让用户填写。

我们别分称这两个阶段的表单为设计模式和用户模式。设计模式的表单配置我们已经讲了，下面看用户模式下的表单配置：

#### 基于 f-render 的配置

通过属性 pure, 可以直接做为表单使用，其数据提交方式同 vue-ele-form 一样，具体可查看文档。

`html



`

#### 基于 vue-ele-form 的配置

如果你的可视化设计和表单使用，不再一个系统，可以直接使用 vue-ele-form，不必安装 f-render，具体如下：

`html



`

定制化

$3

#### 安装组件

`bash
yarn add vue-ele-form-quill-editor
`

#### 注册组件

`js
Vue.component("quill-editor", EleFormQuillEditor);
`

#### 配置属性

`html



`

$3

#### 创建组件并全局注册

需要根据 vue-ele-form 文档创建自定义组件，并注册。

#### 书写配置

你可以参考源码中的配置，一下是范例和属性说明：

`js
// custom-url.js
export default {
// 假如这个组件叫 url（必填）
type: "custom-url",
// 默认标签名（必填）
label: "URL",
// 用于排序，值越小，越靠前
sort: 1,
// 属性配置
config: {
// 属性配置说明地址（可省略）
url: "https://www.xxx.com",
// 组件属性配置（不知道啥是组件属性，可以看一下界面右侧）
attrs: {
// config 配置 参考 FormDesc:
// https://www.yuque.com/chaojie-vjiel/vbwzgu/iw5dzf#KOPkD
config: {
// max 为属性名
max: {
type: "number",
label: "最大输入长度"
},
name: {
type: "input",
label: "原生 name",
// 必填
required: true
}
// ....
},
// 默认值，如果在配置文件里设置了，则每个组件都会携带
data: {
name: "url"
}
},
// 表单项配置，是 FormDesc 中非 attrs 的其它配置，
// 具体可看：https://www.yuque.com/chaojie-vjiel/vbwzgu/iw5dzf#hl4pm
common: {
config: {
// 默认值
default: {
type: "input",
label: "默认值"
}
},
data: {}
}
}
};
`

#### 合并配置并传入

`html



`

$3

- 组件配置目录：f-render/src/fixtures/comps.js
- 表单配置目录：f-render/src/fixtures/form-props.js
- 表单项通用属性配置：f-render/src/fixtures/form-item-common.js
- 扩展组件目录：f-render/src/fixtures/extends/[扩展组件名].js

如果你想修改组件属性或者表单的属性，减少或者增加组件，可以将上述文件拷贝到自己的项目目录，参考上述配置说明，进行更改，并传入即可：

`html



:form-props="formProps"
:comps="comps"
:form-item-common="formItemCommon"
/>
`

具体而言，如果想让每个 input 组件都携带 clearable: true 的属性，我们可以这样操作：

`html



`

$3

我们可以通过 isShowRight 属性来控制右侧面板是否显示，通过 rightTabs 来定制具体显示的面板名称，具体如下：

`html



`

$3

直接进行样式覆盖即可，注意不要加 scoped，否则覆盖不成功

二次开发

如果仅通过属性和样式定制化已无法满足的你和你产品经理的要求，那就需要进行定制化开发，我个人觉得代码整体还是非常简单的，你可以 clone 代码或者下载后（建议用gitee），进行相应的更改，更改后有两种处理方式:

- 直接放到项目目录里，并将安装 dependencies 的依赖复制到项目，进行开发即可；
- 直接开发，然后发布到公司私服，如果是开源，则可以发到 GitHub 或者 gitee，然后安装自己的即可

具体的细节，开头提的教程里会有详细的过程，希望大家可以支持一下。

f-render 问答集锦

- 1、f-render 不能做什么？
- 2、怎么实现 options URL 配置？

Props 说明

`js
props: {
// 表单内容
config: {
type: [Object, String],
required: true
},
// 设计器整体高度
height: {
type: [String, Number],
default: "400px"
},
// 保存格式
saveFormat: {
type: String,
default: "string",
validator(val) {
return ["object", "string"].includes(val);
}
},
// 是否纯净（用于显示表单）
pure: Boolean,
// 表单配置
formProps: {
type: Object,
default: () => formProps
},
// 表单项配置
formItemCommon: {
type: Object,
default: () => formItemCommonDefault
},
// 组件列表
comps: {
type: Array,
default: () => comps
},
// 操作配置
operations: {
type: Array,
default: () => ["preview", "data", "code", "batch", "clear", "save"]
},
// 是否显示右侧
isShowRight: {
type: Boolean,
default: true
},
// 右侧属性面板 Tabs
rightTabs: {
type: Array,
default: () => [
{ label: "表单项属性配置", name: "form-item-common" },
{ label: "组件属性配置", name: "form-item-attrs" },
{ label: "表单配置", name: "form-props" }
]
},
// 是否在加载
loading: Boolean,

// 表单相关（pure 为 true 时）, 同 vue-ele-form
// https://www.yuque.com/chaojie-vjiel/vbwzgu/dyw8a7
requestFn: Function,
isLoading: Boolean,
formError: Object,
// ....
},
`

插槽

- left：左侧组件列表
- main: 中间区域
- main-header: 头部操作区
- main-content: 表单设计区
- right: 右侧属性配置区

举例：

`html