JSON驅動的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)
           

使用

元件

props

• menu

  MenuList

  重新配置拖拽的元件
• height

  int|string

  設計器元件高度, 預設

  100%

元件方法

• 擷取目前生成表單的生成規則

  示例:

  this.$refs.designer.getRule()

• 擷取目前表單的全局配置

  type getOption = () => Object
             

• 設定目前生成表單的規則
• 設定目前表單的全局配置
• 增加一組拖拽元件
• 删除一組拖拽元件
• 批量覆寫插入拖拽元件
• 插入一個拖拽元件到分組
• 删除一個拖拽元件
• 新增一個拖拽元件的生成規則

提示! 内置的三個元件分組

name

分别為:

main

,

aide

,

layout

License

MIT

Copyright © 2021-present xaboy