1 Star 0 Fork 475

zhangxu0923 / f-render

forked from 张超杰 / f-render 
加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README
MIT

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

MIT npm bundle size npm Netlify Status gitub pages Star on GitHub

交流群

交流群

介绍

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

f-render 演示图

注意

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

特性

  • 组件方式:以组件方式接入,1 分钟轻松接入;
  • 体积小:Gzip 压缩后 200k 以内;
  • 易扩展:可以在不更改源码的情况下增删改属性、组件;

Demo

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

安装 & 注册

yarn add element-ui  # npm install element-ui
yarn add vue-ele-form # npm install vue-ele-form
yarn add f-render # npm install f-render
// 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);

使用简介

使用分为两个部分,首先是进行表单拖拽设计,然后再已纯表单的形式使用

表单设计

<template>
  <f-render
    @save="handleSave"
    :loading="loading"
    height="calc(100vh - 60px)"
    :config="formConfig"
  />
</template>

<script>
  export default {
    data() {
      return {
        loading: false,
        formConfig: {}
      };
    },
    methods: {
      handleSave(res) {
        // 这里是保存到 localStorage,你可以保存到服务器
        localStorage.setItem("form-config", res);
        this.$message.success("保存成功啦~");
      }
    },
    mounted() {
      // 模拟异步加载
      this.loading = true;
      setTimeout(() => {
        this.loading = false;
        this.formConfig = localStorage.getItem("form-config") || "";
      }, 1000);
    }
  };
</script>

表单使用

基于 f-render 使用

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

<template>
  <f-render
    v-model="formData"
    :request-fn="handleSubmit"
    @request-success="handleSuccess"
    :config="formConfig"
    pure
  />
</template>

<script>
  export default {
    data() {
      return {
        formData: {},
        formConfig: ""
      };
    },
    methods: {
      handleSubmit(data) {
        // eslint-disable-next-line no-console
        console.log(data);
        return Promise.resolve();
      },
      handleSuccess() {
        this.$message.success("创建成功");
      }
    },
    mounted() {
      // 模拟异步加载
      this.loading = true;
      setTimeout(() => {
        this.loading = false;
        this.formConfig = localStorage.getItem("form-config") || "";
      }, 1000);
    }
  };
</script>

基于 vue-ele-form 使用

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

<template>
  <ele-form
    v-model="formData"
    :request-fn="handleSubmit"
    @request-success="handleSuccess"
    v-if="formConfig"
    v-bind="formConfig"
  />
</template>

<script>
  export default {
    data() {
      return {
        formData: {},
        formConfig: null
      };
    },
    methods: {
      handleSubmit(data) {
        // eslint-disable-next-line no-console
        console.log(data);
        return Promise.resolve();
      },
      handleSuccess() {
        this.$message.success("创建成功");
      }
    },
    mounted() {
      // 模拟异步加载
      setTimeout(() => {
        try {
          // 这里必须对字符串进行反序列化
          this.formConfig = eval(`(${localStorage.getItem("form-config")})`);
        } catch {
          this.$message.error("数据解析失败");
        }
      }, 1000);
    }
  };
</script>

定制化

新增官方扩展组件(以富文本扩展为例)

安装组件

yarn add vue-ele-form-quill-editor

注册组件

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

配置属性

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

<script>
// 默认配置
import comps from "f-render/src/fixtures/comps";
// 富文本配置
import quillEditor from "f-render/src/fixtures/extends/quill-editor";
// 可以更改显示组件位置,默认为 10
// 这里更改为 2,显示更靠前
quillEditor.sort = 2

export default {
  data() {
    return {
      // 拼接上即可
      comps: comps.concat(quillEditor),
    }
  }
}
</scirpt>

新增自定义组件

创建组件并全局注册

需要根据 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
        }
        // ....
      },
      // 默认值
      // 如果在保存时,默认值未更改,则会被剔除,保持数据的简洁性
      defaultData: {
        max: 255
      },
      // 必须值
      // 在保存时,必填值无论是否更改,都会保留,用作一些属性是必填的
      requiredData: {
        name: "url"
      }
    },
    // 表单项配置,是 FormDesc 中非 attrs 的其它配置,
    // 具体可看:https://www.yuque.com/chaojie-vjiel/vbwzgu/iw5dzf#hl4pm
    common: {
      config: {
        // 默认值
        default: {
          type: "input",
          label: "默认值"
        }
      },
      // 这两个和上面一个意思,分别是 common 的默认值和必填值
      defaultData: {},
      requiredData: {}
    }
  }
};

合并配置并传入

<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

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

<!-- formProps 是表单属性 -->
<!-- comps 是组件列表和属性 -->
<!-- formItemCommon 是表单项通用属性配置 -->
<f-render
  :form-props="formProps"
  :comps="comps"
  :form-item-common="formItemCommon"
/>

样式定制化

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

二次开发

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

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

如果你或者你的公司需要付费源码讲解和答疑,可加我微信:dream10nian。当然也有也有免费的交流群,也是加这个微信。

f-render 问答集锦

Props 说明

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"]
  },
  // 是否在加载
  loading: Boolean,

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

生态

Project Status Description
vue-ele-form npm 接基于 ElementUI 的数据驱动表单
f-render npm 专为 vue-ele-form 开发的可视化表单设计工具
vue-ele-form-json-editor npm JSON 编辑器(vue-ele-form 扩展)
vue-ele-form-upload-file npm upload 文件上传组件(vue-ele-form 扩展)
vue-ele-form-image-uploader npm 上传图片增强组件(vue-ele-form 扩展)
vue-ele-form-tree-select npm 树形选择框组件(vue-ele-form 扩展)
vue-ele-form-table-editor npm 表格编辑器(vue-ele-form 扩展)
vue-ele-form-dynamic npm 动态表单(vue-ele-form 扩展)
vue-ele-form-video-uploader npm 上传视频增强组件(vue-ele-form 扩展)
vue-ele-form-quill-editor npm 富文本编辑器(vue-ele-form 扩展)
vue-ele-form-markdown-editor npm markdown 编辑器(vue-ele-form 扩展)
vue-ele-form-bmap npm 百度地图组件(vue-ele-form 扩展)
vue-ele-form-codemirror npm 代码编辑器(vue-ele-form-gallery 扩展)
vue-ele-form-gallery npm 图片/视频展示组件(vue-ele-form 扩展)
vue-ele-form-data-editor npm 轻量级数据编辑器(vue-ele-form 扩展)

特别感谢赞助者

优客服
圣捷远创
damonnie
xzusoft
seeenter
高亢

如果您觉得对您有所帮助, 可以请作者喝一杯咖啡, 让开源走的更远, 点击进入码云赞赏一下, 并加入下面交流群, 将链接发送给我

Contributors ✨

Thanks goes to these wonderful people (emoji key):


张超杰

📖 💻 🤔

Wisen

💻

IWANABETHATGUY

💻

This project follows the all-contributors specification. Contributions of any kind welcome!

MIT License Copyright (c) 2019 二当家的 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.m

简介

f-render | 基于 ElementUI 的表单设计器 展开 收起
JavaScript
MIT
取消

发行版

暂无发行版

贡献者

全部

近期动态

加载更多
不能加载更多了
JavaScript
1
https://gitee.com/zhangxu0923/f-render.git
git@gitee.com:zhangxu0923/f-render.git
zhangxu0923
f-render
f-render
master

搜索帮助