form-create-designer

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

原始碼地址: Github | GItee

線上演示

安裝

npm install @form-create/designer

引入

CDN:

NodeJs:

請自行匯入ElementUI並掛載

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

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

使用

元件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