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

源碼地址: Github | GItee

在線演示

安裝

npm install @form-create/designer

引入

CDN:

<!-- import Vue.js -->
<script src="http://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="http://unpkg.com/@form-create/element-ui/dist/form-create.min.js"></script>
<!-- import form-create/designer -->
<script src="http://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