form-create-designer 是基于 @form-create/element-ui 實作的表單設計器組件，可以通過拖拽的方式快速創建表單，輕松幫你搞定表單，
原始碼地址: Github | GItee
在線演示
安裝
npm install @form-create/designer引入
CDN:
<!-- import Vue.js -->
<script src=https://www.cnblogs.com/xaboy/p/"//vuejs.org/js/vue.min.js"></script>
<!-- import stylesheet -->
<link rel="stylesheet" href=https://www.cnblogs.com/xaboy/p/"https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- import element -->
<script src=https://www.cnblogs.com/xaboy/p/"https://unpkg.com/element-ui/lib/index.js"></script>
<!-- import form-create/element -->
<script src=https://www.cnblogs.com/xaboy/p/"//unpkg.com/@form-create/element-ui/dist/form-create.min.js"></script>
<!-- import form-create/designer -->
<script src=https://www.cnblogs.com/xaboy/p/"//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
- menu
MenuList重新配置拖拽的組件 - height
int|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
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/273173.html
標籤：JavaScript
上一篇：CSS 文字裝飾 text-decoration & text-emphasis
下一篇：模擬jQuery選擇器功能及方法