from-designer-resapi
文档 | 在线演示 | form-create 文档
如果对您有帮助,您可以点右上角 "Star" 支持一下 谢谢!本项目基于 form-create-designer 进行二开如有任何建议或问题请联系 909421456@qq.com
安装
npm i from-designer-resapi
引入
NodeJs:
请自行导入ElementUI
并挂载
import formCreate from "@form-create/element-ui";
import FcDesigner from "from-designer-resapi";
Vue.use(formCreate);
Vue.use(FcDesigner);
使用
<fc-designer ref="designer" />
更新日志1.0.6
- 优化选择选中颜色方式(单选,多选等);
- 修改输入框属性设置
- 修改多选框属性设置
- 修改导入json动态接口不能加载数据的bug
- 增加正则验证规则
props
组件-
menu
MenuList
重新配置拖拽的组件 -
height
int|string
设计器组件高度, 默认100%
组件方法
-
拖拽完成/复制/添加/删除的回调方法, 如果需要单独触发请联系作者
type onDradAllEvent = (fn) => { fn };
示例:
this.$refs.designer.onDradAllEvent(fn)
-
获取当前生成表单的生成规则
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: string | MenuItem) => void;
-
新增一个拖拽组件的生成规则
```ts type addComponent = (item: DragRule) => void; ```
提示! 内置的三个组件分组
name
分别为:main
,aide
,layout