-FRender(表单设计器)下载 v4.12.0官方版
FRender是一款开源的表单设计器，软件借助于各种流程引擎和动态表单项目，依托vue-ele-form，知识兔可以帮助用户开发种类型的表单，通过设置表单属性和表单项属性就可以快速的生成代码了，内置可视化的富文本编辑器，编辑起来更简单，并且知识兔可以在不更改源码的情况下增删改属性和组件。知识兔小编还为带来了FRender安装教程和使用教程供大家参考。
软件特色
1、组件方式：以组件方式接入，1 分钟轻松接入;
2、体积小：Gzip 压缩后 100k 左右;
3、易扩展：可以在不更改源码的情况下增删改属性、组件;
FRender安装配置方法
第1 步：安装
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 步：注册
// 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 步：使用
@save=”handleSave”
:loading=”loading”
height=”calc(100vh – 60px)”
:config=”formConfig”
/>
用户模式
知识兔把动态表单分为两个阶段：
首先是设计阶段：通过拖拽设计表单;
然后知识兔是用户阶段：将设计好的表单以纯表单的形式让用户填写。
知识兔别分称这两个阶段的表单为设计模式和用户模式。设计模式的表单配置知识兔已经讲了，下面看用户模式下的表单配置：
基于 f-render 的配置
通过属性 pure, 可以直接做为表单使用，其数据提交方式同 vue-ele-form 一样，具体可查看文档。
v-model=”formData”
:request-fn=”handleSubmit”
@request-success=”handleSuccess”
:config=”formConfig”
pure
/>
基于 vue-ele-form 的配置
如果知识兔你的可视化设计和表单使用，不再一个系统，知识兔可以直接使用 vue-ele-form，不必安装 f-render，具体如下：
v-model=”formData”
:request-fn=”handleSubmit”
@request-success=”handleSuccess”
v-if=”formConfig”
v-bind=”formConfig”
/>
FRender使用教程
①新增自定义组件
创建组件并全局注册
需要根据 vue-ele-form 文档创建自定义组件，并注册。
书写配置
你可以参考源码中的配置，一下是范例和属性说明：
// 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: {}
}
}
};
合并配置并传入
聽 聽
②定制化原组件配置 & 表单配置
组件配置目录：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
如果知识兔你想修改组件属性或者表单的属性，减少或者增加组件，知识兔可以将上述文件拷贝到自己的项目目录，参考上述配置说明，进行更改，并传入即可：
:form-props=”formProps”
:comps=”comps”
:form-item-common=”formItemCommon”
/>
具体而言，如果知识兔想让每个 input 组件都携带 clearable: true 的属性，知识兔可以这样操作：
定制化右侧 Tabs
知识兔可以通过 isShowRight 属性来控制右侧面板是否显示，通过 rightTabs 来定制具体显示的面板名称，具体如下：
聽 聽
样式定制化
直接进行样式覆盖即可，注意不要加 scoped，否则覆盖不成功
下载仅供下载体验和测试学习，不得商用和正当使用。
