FcDesigner 正在参加 2021 年度 OSC 中国开源项目评选,请投票支持!
FcDesigner 在 2021 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
2021 年度 OSC 中国开源项目评选 正在火热进行中,快来投票支持你喜欢的开源项目!
2021 年度 OSC 中国开源项目评选 >>> 中场回顾
FcDesigner 获得 2021 年度 OSC 中国开源项目评选「最佳人气项目」 !
授权协议 MIT
开发语言 JavaScript HTML/CSS
操作系统 跨平台
软件类型 开源软件
所属分类 Web应用开发Vue 组件
开源组织
地区 国产
投 递 者 xaboy
适用人群 未知
收录时间 2024-05-21

软件简介

form-create-designer 是基于 @form-create/element-ui 实现的表单设计器组件。可以通过拖拽的方式快速创建表单,轻松帮你搞定表单。

在线演示 | 源码下载

安装

npm install @form-create/designer

引入

CDN:

<!-- import Vue.js -->
<script src="//vuejs.org/js/vue.min.js"></script>
<!-- import stylesheet -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- import element -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!-- import form-create/element -->
<script src="//unpkg.com/@form-create/element-ui/dist/form-create.min.js"></script>
<!-- import form-create/designer -->
<script src="//unpkg.com/@form-create/designer/dist/index.min.js"></script>

NodeJs:

请自行导入ElementUI并挂载

import formCreate from '@form-create/form-create'
import FcDesigner from '@form-create/designer'

Vue.use(formCreate)
Vue.use(FcDesigner)

使用

<fc-designer ref="designer"/>

组件props

  • menuMenuList 重新配置拖拽的组件
  • heightint|string 设计器组件高度, 默认100%

组件方法

  • 获取当前生成表单的生成规则

    type getRule = () => Rule[]

    示例: this.$refs.designer.getRule()

  • 获取当前表单的全局配置

    type getOption = () => Object
  • 设置当前生成表单的规则

    type setRule = (rules: Rule[]) => void;
  • 设置当前表单的全局配置

    type setOption = (option: Object) => void;
  • 增加一组拖拽组件

    type addMenu = (menu: Menu) => void;
  • 删除一组拖拽组件

    type removeMenu = (name: string) => void;
  • 批量覆盖插入拖拽组件

    type setMenuItem = (name: string, items: MenuItem[]) => void;
  • 插入一个拖拽组件到分组

    type appendMenuItem = (name:string, item: MenuItem) => void;
  • 删除一个拖拽组件

    type removeMenuItem = (item: MenuItem) => void;
  • 新增一个拖拽组件的生成规则

    type addComponent = (item: DragRule) => void;
    提示! 内置的三个组件分组name分别为: main,aide,layout

数据结构

设计器中用到的数据结构

import {Rule} from "@form-create/element-ui";

//左侧拖拽按钮
export interface MenuItem {
    label: string,
    name: string,
    icon: string;
}

//左侧拖拽按钮分类
export interface Menu {
    title: string;
    name: string;
    list: MenuItem[]
}

export interface MenuList extends Array<Menu> {

}

//拖拽组件的规则
export interface DragRule {
    name: string;

    rule(): Rule;

    props(): Rule[];

    children?: string;
    inside?: true;
    drag?: true | String;
    dragBtn?: false;
    mask?: false;
}

License

MIT

Copyright (c) 2021-present xaboy

展开阅读全文

代码

的 Gitee 指数为
超过 的项目

评论

点击引领话题📣 发布并加入讨论🔥
发表了资讯
06/03 10:42

可视化表单设计 FcDesigner v3.1.0 发布,新增 12 个组件,支持事件配置等

FcDesigner 是一款可视化表单设计器组件。可以通过拖拽的方式快速创建表单,提高开发者对表单的开发效率,节省开发者的时间。 本项目采用 Vue 和 ElementPlus 进行页面构建,内置多语言解决方案,支持二次扩展开发,支持自定义组件扩展。 兼容Vue2和Vue3版本 帮助文档 | 在线演示 | 源码下载 3.2.0 (2024-06-01) 增加12个可拖拽组件,目前共内置了36个可拖拽组件 新增表格布局 新增表格表单组件 增加表单结构预览 增加默认值录入...

0
17
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
发表了博客
{{o.pubDate | formatDate}}

{{formatAllHtml(o.title)}}

{{parseInt(o.replyCount) | bigNumberTransform}}
{{parseInt(o.viewCount) | bigNumberTransform}}
没有更多内容
暂无内容
发表了问答
{{o.pubDate | formatDate}}

{{formatAllHtml(o.title)}}

{{parseInt(o.replyCount) | bigNumberTransform}}
{{parseInt(o.viewCount) | bigNumberTransform}}
没有更多内容
暂无内容
暂无内容
0 评论
9 收藏
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部