可视化表单设计器拖拽生成表单(原创)

所属分类:输入,UI-丰富的输入,拖和放,布局

 24371  223  查看评论 (6)
分享到微信朋友圈
X
可视化表单设计器拖拽生成表单(原创) ie兼容11

更新时间:2021-04-11 21:56:01

form-create-designer

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/element-ui'
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: string | MenuItem) => void;
  • 新增一个拖拽组件的生成规则

type addComponent = (item: DragRule) => void;

提示! 内置的三个组件分组name分别为: main,aide,layout

相关插件-丰富的输入,拖和放,布局

jQuery H5电子签名

H5电子签名demo,支持移动端
  丰富的输入
 53404  432

移动端全屏画板

手机全屏画板,支持多种颜色,绘制完可下载为图片,适合小游戏开发。(例如:画出印象中的你)
  丰富的输入
 40202  344

简洁的前端用户登陆注册界面

简洁的前端用户登陆注册界面,提供5种风格样式
  丰富的输入
 38328  302

留言板的添加和删除

留言板的添加和删除
  丰富的输入
 46312  545

讨论这个项目(6)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    002 0
    2021/11/12 16:12:58
    请问这个的组件可以跨行吗? 回复
    熊瑞 0
    2021/4/20 10:42:37
    怎么用? 不会只能看看吧 回复
    A????????s . 0
    2021/4/17 10:34:40
    有没有不用vue写的???
        0
        2021/4/26 14:39:05
        兄弟 有找到不用vue写的吗
    回复
    快乐的无名氏 0
    2021/4/13 14:16:25
    寒水映月 0
    2021/4/12 13:28:49
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复