npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

f-render

v4.12.3

Published

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

Downloads

70

Readme

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 压缩后 100k 左右;
  • 易扩展:可以在不更改源码的情况下增删改属性、组件;

Demo

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

教程

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

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

1 分钟快速接入

第 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 步:使用

<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)
      };
    }
  };
</script>

新增自定义组件

创建组件并全局注册

需要根据 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

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

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

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

<template>
  <!-- 其它属性省略 -->
  <!-- 将更改后的 comps 传递过去即可 -->
  <f-render :comps="comps" />
</template>

<script>
  import comps from "f-render/src/fixtures/comps";
  // 查找 input 组件,当然你也可以看源码,直接查看索引
  const inputIndex = comps.findIndex(item => item.type === "input");
  // 更改 config.attrs.data 值即可
  comps[inputIndex].config.attrs.data = { 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,否则覆盖不成功

二次开发

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

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

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

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", "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: 右侧属性配置区

举例:

<template>
  <f-render>
    <!-- 左侧插槽 -->
    <template v-slot:left="{frender}">
      <div>
        <div>left</div>
        <div>{{frender.comps}}</div>
      </div>
    </template>
  </f-render>
  <template></template
></template>

其中 frender 数据是 f-render 组件数据的集合,具体都有哪些数据,可以参考源码,其它插槽均有此参数。

生态

| 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 扩展) |

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

Contributors ✨

Thanks goes to these wonderful people (emoji key):

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