form-create-designer開源啦,好用的vue可視化表單設計器

form-create-designer

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