# 基础配置

动态表单开箱即用，所有得配置都是可选项，目前包含配置有国际化、http请求配置、数据字典配置、自定义组件配置等。

全局配置需要在main.js 中直接引用，正确得引用示例如下:


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

// 全局配置目前有 国际化、http请求头、数据字典、自定义组件
const opts = {
	locale: 'zh_CN' , // 国际化 目前支持英文(en)、中文简体(zh_CN)
	httpConfig: (config)=> {	// http头配置
		config.headers['aaaa'] = 'bbbb';
		return config ;
	},
	dict: [				// 数据字典配置
		{type: 'sex' , label: '男' , value: '1'},
		{type: 'sex' , label: '女' , value: '2'},
	],
	components: [] // 自定义组件列表
}

// 注册组件库
Vue.use(NgForm , opts)

# 国际化

目前国际化支持得版本有ng-form-element

动态表单组件内置中文简体和英文两种国际化配置，默认为中文简体。在组件注册的时候进行配置。

# 1.1 配置

指定语言可以使用语言得简写或者直接导入语言库两种方式。

 
// 注册组件库 时配置当前语言为英文
// locale 可以直接指定具体的语言，也可以传入语言库json配置

// 第一种 直接配置具体语言
Vue.use(NgForm , {locale: 'en'}) 
 
// 第二种 配置具体语言库
import { locale } from 'ng-form-element'
 
const localeEn =  locale.langs.en  
Vue.use(NgForm , {locale: localeEn })

# 1.2 语言切换

支持在动态表单使用时进行语言切换，语言切换只针对于ng-form-build和ng-form-design两个大组件中进行切换。

// 在布局组件中进行语言切换
this.$refs.formDesign.useLocale('zh_CN')

// 在填报/预览组件中进行语言切换
this.$refs.formBuild.useLocale('en')

说明：语言切换时也可以指定具体的语言数据 json

# 1.3 自定义语言库配置

如果我们使用了自定义组件，或者想要修改组件内部配置的标签名称，可以通过自定义语言库的方法覆盖或者合并到当前语言库中。

1）自己配置语言库

exampleEn.js

export default {
    ngform: {
        example:  'Example'
    }
}

2）在组件库中获取当前的中文库进行合并

import { locale } from 'ng-form-element'
 
const localeEn =  locale.langs.en  

import exampleEn from './locale/en.js' 
 
// deepmerge 自行安装
const mergeEn =  deepmerge(localeEn, exampleEn, { clone: true })

// 注册组件库时将当前合并后的语言放入配置
Vue.use(NgFrorm , {locale: mergeEn )

# Http配置

支持全局http配置得版本有ng-form-element，其他版本需要在ng-form-design和ng-form-build组件中分别注册http配置。

http请求目前在文件上传、select、checkbox、radio、cascader组件中API请求时启用，如果您不需要使用这些组件或者不需要这些组件和您自己得后台做交互，那么此配置完全可以忽略。

http请求配置为一个函数，格式如下:

(config)=> {
	config.headers['token'] = 'aaa';
	return config;
}

支持全局挂载配置（目前仅ng-form-element支持）和引用挂载两种方式。

# 全局挂载

全局挂载参考点击这里

# 使用时挂载

挂载配置需要在ng-form-design和ng-form-build两个组件使用时进行配置。

挂载示例

<template>
    <div> 
        <ng-form-design ref="formDesign" :config="formConfig" />  

        <!-- ng-form-build 使用如下代码 -->
        <ng-form-build ref="formBuild" :config="formConfig" />  
    </div> 
</template>
<script>
	import { getTokenKey , getToken } from '@/utils/auth.js'
    export default { 
    	data() {
    		return {
    			formConfig: {
    				httpConfig: (config)=>{ 
    					const token = getToken()
    					const key = getTokenKey()
				        config.headers[key] = token
				        return config 
				    }
    			}
    		}

    	}
    }
</script>

# 数据字典

数据字典在checkbox、radio、select组件中使用，如果您不需要使用这些组件或者不需要数据字典作为数据来源时，此处配置可以忽略。

数据字典得数据格式如下:

key	说明	类型
type	字典分类，同一分类用一个key	string
label	字典标签	string
value	字典值(同一分类唯一)	String

示例数据

[
    {type: 'sex' , label: '男' , value: '1'},
    {type: 'sex' , label: '女' , value: '2'},
    {type: 'yes_or_no' , label: '是' , value: '1'},
    {type: 'yes_or_no' , label: '否' , value: '2'},
    {type: 'nation' , label: '汉族' , value: '1'},
    {type: 'nation' , label: '蒙古族' , value: '2'},
    {type: 'nation' , label: '藏族' , value: '3'},
    {type: 'nation' , label: '壮族' , value: '4'}
]

字典配置时，配置字典分类type得值即可。

# 全局挂载

全局注册时挂载目前支持得组件有 ng-form-element

全局挂载参考点击这里

注意：全局挂载目前不支持异步挂载，因为全局挂载时字典数据需要一次到位。

# 使用时挂载

使用时挂载数据字典需要在ng-form-build和ng-form-deisgn中分别引用，并且数据要求一致，否则可能造成配置得表单和回显填写时得表单字典内容不一样。

挂载示例

<template>
    <div> 
        <ng-form-design ref="formDesign" :config="formConfig" />  

        <!-- ng-form-build 使用如下代码 -->
        <ng-form-build ref="formBuild" :config="formConfig" />  
    </div> 
</template>
<script>
	import { getTokenKey , getToken } from '@/utils/auth.js'
    export default { 
    	data() {
    		return {
    			formConfig: {
    				// 数据字典配置
    				// 此处可通过后台获取需要的字典后配置
    				dict: [
			          {type: 'sex' , label: '男' , value: '1'},
			          {type: 'sex' , label: '女' , value: '2'},
			          {type: 'yes_or_no' , label: '是' , value: '1'},
			          {type: 'yes_or_no' , label: '否' , value: '2'},
			          {type: 'nation' , label: '汉族' , value: '1'},
			          {type: 'nation' , label: '蒙古族' , value: '2'},
			          {type: 'nation' , label: '藏族' , value: '3'},
			          {type: 'nation' , label: '壮族' , value: '4'}
			        ]
    			}
    		}

    	}
    }
</script>

# 自定义组件挂载

ng-form内置了十余种组件，但业务开发中往往有很多特殊得业务组件，此时需要我们将自定义得组件挂载到动态表单上。

自定义组件得数据格式如下:


import BaseIndex from './index.vue'
import BaseProperties from './properties.vue' 


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

]

自定义组件支持全局挂载和使用时挂载两种方式，推荐使用全局挂载。

# 全局挂载

全局挂载参考点击这里

# 使用时挂载

使用时挂载数据字典需要在ng-form-build和ng-form-deisgn中分别引用，并且数据要求一致，否则可能造成配置得表单和回显填写时得组件不一样。

挂载示例

<template>
    <div> 
        <ng-form-design ref="formDesign" :custom-component="components" />  

        <!-- ng-form-build 使用如下代码 -->
        <ng-form-build ref="formBuild" :custom-component="components" />  
    </div> 
</template>
<script>
	import BaseIndex from './index.vue'
	import BaseProperties from './properties.vue' 
	import icon from './icon.js'
    export default { 
    	data() {
    		return {
    			components: [
    				{
    					type: 'ngimage' , 
						label: '图片示例' ,  
						icon: '' , 
						component:  BaseIndex ,  
						properties: BaseProperties  
    				} 
    			]
    		}

    	}
    }
</script>

← 快速入手组件说明 →