自定义组件

ng-form系列支持自定义组件，但自定义组件需要遵循一定规范，自定义组件以数字列表形式挂载到框架中，以下是单个自定义组件需要提供的几个必要属性

属性	必要性	说明
type	必须	组件类型，全局唯一
label	必须	组件名称
component	必须	自定义组件渲染模块
icon	待选	组件图标，图片base64
seq	待选	组件展示序号
properties	待选	自定义组件属性配置模块
其他	待选	其他信息可以自定义加载任何key和数据，但不要和上面的任何key重名

下面给出一个全局挂载的示例

main.js

// 引入ng-form
import NgForm from 'ng-form-element' 
import 'ng-form-element/lib/ng-form-element.css'

// 自定义组件的文件
import BaseIndex from './index.vue'
import BaseProperties from './properties.vue' 

// 自定义组件列表
const customComponents = [
	{
		type: '' ,// 必填 组件类型 全局唯一，并且不要和已有默认组件类型冲突
		label: '' , // 必填 组件标签
		icon: '' ,// 选填 组件图标  base64字符串
		component:  BaseIndex , // 必填 组件渲染页面
		seq: 10,
		properties: BaseProperties  // 选填 组件得属性配置页面  有些组件可能不需要属性配置页面
	}

]

// 注册组件库
Vue.use(NgForm , {components: customComponents})  

属性配置页面

属性配置页面自定义配置，框架会通过props传递selectItem对象，该对象是当前动态表单选中的要素信息，包含了要素配置的所有信息。

示例:

<template> 
 <el-form v-if="selectItem && selectItem.type == 'test'" label-width="90px">
 	<el-form-item label="高度">
 		<el-input  v-model="selectItem.width"/> 
 	</el-form-item> 
 </el-form> 
</template>
<script> 
export default { 
   props: { 
   	// 传递过来选中的组件信息
     	selectItem: {
     		type: Object
     	} 

   }
}
</script>

渲染页面

渲染页面会从框架处通过props传递若干信息，具体如下表:

属性	必有	类型	说明
record	必有	Object	当前需要渲染的组件对象
models	必有	Object	当前整个表单的填报数据
disabled	-	boolean	是否禁用，有值并且=true是禁用
preview	-	boolean	是否预览查看，有值并且=true是当前是查看
isDragPanel	-	boolean	组件是否在配置页面中而不是填报页面

说明

一般来说，当前动态表单中record.model 表示当前动态表单的数据绑定key，但自定义组件可以不遵循此规范，因为自定义组件中内部数据如何绑定是在自己的页面中写的。

在遵循规范情况下，一个组件最后的填写数据一般为 : models[record.model]

源代码

代码结构

├─form-design	
│  │  build.vue	# ng-form-build
│  │  index.vue # ng-form-design
│  │  
│  ├─items 		# 组件目录
│  │  │  
│  │  ├─application # 应用组件
│  │  │          
│  │  ├─base 		# 基础组件
│  │  │              
│  │  ├─decorate 	# 装饰组件
│  │  │          
│  │  └─layout  	# 布局组件
│  │              
│  ├─panel-container # 面板-中间内容区域
│  │      
│  ├─panel-drag 	# 面板-左侧拖拽区域
│  │      
│  ├─panel-header 	# 面板-顶部区域
│  │      
│  └─panel-properties # 面板-属性配置区域
│          
├─ng-form 			# 内部提供一个根据json配置生成表单的工具
│      
└─utils 			# 防止各个封装的js