动态表单创建和渲染的组件, 基于 Vue
和 Typescript
,UI 采用了 element-ui
。
两大组件 Design
和 Viewer
。
设计器组件,此组件提供拖拽方式完成表单的设计,并返回设计器的JSON Model。
import { Design } from 'belvoly-form-studio'
export default {
method: {
get () {
// 获取设计器的JSON Model
const designModel = this.$refs.designer.getModel()
}
}
}
<design :defaultModel="defaultDesignModel" ref="designer"></design>
defaultModel
:在设计器打开时默认设计数据,默认为null即可。此属性用在编辑时,或导入json时使用.
getModel
:获取设计器的JSON Modelclear
: 清空设计器
此组件将Design组件的JSON Model 转为表单界面,支持数据获取,数据校验
import { Viewer } from 'belvoly-form-studio'
<viewer :designModel="designModel"></viewer>
defaultModel
:设计器生成的模型数据,Viewer根据此模型数据渲染表单.defaultValue
:表单默认的数据,第一次有用。itemValueField
:表单元素根据控件属性的哪个字段获取值,默认 'id'。mobile
:是否渲染为移动表单,默认false
。
validate
:验证所有控件。getData
:获取表单的数据
- 修复支持打包支持es5
- 打包由 Vue-Cli改为 Rollup 打包,精简打包的内容
Grid
的gutter
只能是整数
Design
组件增加dragOptions
属性和dragStart
、dragEnd
事件
- Grid 的列属性不可以设置小数
Design
、FormDesign
组件增加itemDbClick
事件- 增加内部组件
DesignDraggable
导出 - 设计模式下,itemClick, itemDbClick事件增加了extra: {zone, event}的参数
- 修复Grid组件没有触发Design的change事件
Design
、FormDesign
的placeholder slot添加zone属性
- 修复IE 11 Grid组件inject mode属性报错
- 修复IE 11 Grid样式问题
- Design组件增加
isPreventOnFilter
属性, boolean类型,在filter事件的时候,是否阻止默认事件,参见sortablejs
设置
- FormDesign组件的属性和验证属性组件都支持extra获取
- 控件的icon现在和样式名一样
- 调整FormDesign组件的样式名统一
- Guid组件重命名为Grid
- Grid组件增加gutter属性,栅格之间的间距
- 增加内部组件DesignZone、ViewZone导出
- DesignZone 增加
replaceControl
、beforeControl
、afterControl
方法 - IProperty 增加
tag
属性
- FormDesign、Design、Viewer组件增加extra属性,用于向子组件提供额外数据,子组件通过extra属性获取。extra必须是json格式。不是必须的
- Vue.install选项增加isUseDefaultControls选项,是否启用默认的控件,默认true
- Vue.install选项增加isRegisterComponent选项,是否注册全局Vue组件,默认false,
bfs-design
、bfs-form-design
、bfs-viewer
- 增加属性验证为必填时,显示红色的*号
- 修复属性过多超出部分没有显示,增加滚动条
- 增加FormDesign组件属性验证功能,通过enablePropertyValid属性控制,默认为false。当为true时,属性如果不通过,再添加或切换其它组件会提示信息
- 增加FormDesign组件itemAdd事件
- 增加FormDesign组件validate方法,验证属性是否通过
- 移除属性编辑器字样,改为当前组件:
- 修复FormDesign组件在defaultModel有值,再拖拽新的控件,可能遇见key重复报错
- 修复Guid控件没有支持readonly