JSON驅動的vue可視化表單設計器組件

form-create-designer 是基於 @form-create/element-ui 實現的表單設計器組件。可以通過拖拽的方式快速創建表單，輕松幫你搞定表單。

 

源碼地址: Github | GItee

 

在線演示

安裝

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

License

MIT

Copyright (c) 2021-present xaboy