-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: {}

}

};

合并配置并传入

<template>
  <!-- 省略其它属性 -->
  <f-render :comps="comps" />
</template>

<script>
  import comps from "f-render/src/fixtures/comps";
  import customUrl from "some/path/custom-url";
  export default {
    data() {
      return {
        comps: comps.concat(customUrl)
      };
    }
  };
</script>

②定制化原组件配置 & 表单配置

组件配置目录：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

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

<f-render< p="">

:form-props="formProps"

:comps="comps"

:form-item-common="formItemCommon"

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

export default {
data() {
return {
comps
};
}
};
</script>

定制化右侧 Tabs

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

<template>
  <!-- 定制化右侧 tabs -->
  <f-render :right-tabs="tabs" />
</template>

<script>
  export default {
    data() {
      return {
        tabs: [
          { label: "表单项属性配置", name: "form-item-common" },
          { label: "组件属性配置", name: "form-item-attrs" }
          // 注释下面的内容，就可以不显示
          // { label: "表单配置", name: "form-props" }
        ]
      };
    }
  };
</script>

样式定制化

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

∨ 展开

FRender(表单设计器) v4.12.0官方版

软件特色

FRender安装配置方法

FRender使用教程

同类推荐

热门游戏