gbsiap-form-element
npm install --save ng-form-element
`
引用
`
// 导入组件库
import NgFormElement from 'ng-form-element'
import 'ng-form-element/lib/ng-form-element.css'
`
注册
`
// 注册组件库
Vue.use(NgFormElement)
`
$3
`
`
$3
#### 1. 表单绘制组件 ng-form-design
方法:
| 方法名称 | 参数| 说明 |
|----|----|---------------|
initModel | json | 初始化动态表单内容，参数为动态表单json模板
getModel| N/A| 返回当前正在编辑得动态表单信息
属性:
| 属性名 | 说明 | 格式| 默认值 |
|----|--------------|---|---|
| customComponents | 自定义组件的配置,具体参加最下方自定义组件示例中的格式 | array | N/A |
| config|表单的一些基础配置，主要为http的一些参数,譬如在http请求中给header增加参数：config: { httpConfig: (config)=>{ config.headers['aaaa'] = 'bbbb' return config } }| object | N/A |
| clear| 是否显示面板上清除按钮 |boolean | true |
| preview| 是否显示面板上预览按钮 |boolean | true |
| reder| 是否显示面板上渲染按钮 |boolean | true |
| imp| 是否显示面板上导入按钮 |boolean | true |
| exp| 是否显示面板上导出按钮 |boolean | true |
| basic-item| 基础组件是否要展示或待选组件列表集合 |boolean/Array | true |
| personal-item| 个性化组件是否要展示或待选组件列表集合 |boolean/Array | true |
| layout-item| 布局组件是否要展示或待选组件列表集合 |boolean/Array | true |
插槽:
| 插槽名称 | 说明 |
|-----------|-------------------------|
| drag | 左侧组件面板插槽，可以在组件面板上面填充一个区域展示内容|
| form-name | 当前动态表单名称|
| control-button | 功能区按钮,如果需要自定义功能按钮可以在这里自定义 |
插槽示例:
`
示例1
示例2
示例3
vue-drag-formdesign 示例
`
#### 2. 表单查看/填报组件 ng-form-build
方法:
| 方法名称 | 参数| 说明 |
|-----------|--------|-------------------------|
| reset | N/A | 重置动态表单内容|
| validator| N/A| 根据设置的规则验证当前表单内容,返回Promise|
| getData | N/A | 表单验证后,获取当前表单数据,返回Promise |
属性:
| 属性名 | 说明 | 格式| 默认值 |
|-----------|------------------------------|--------|----------|
| formTemplate | 表单模板 | json | 无 |
| models | 表单填充数据 | json | 无 |
| disabled | 是否禁用 | boolean | false |
| renderPreview | 当前是否为预览模式 | boolean | false |
| config|表单的一些基础配置，主要为http的一些参数,譬如在http请求中给header增加参数：config: { httpConfig: (config)=>{ config.headers['aaaa'] = 'bbbb' return config } }| object | N/A |
| customComponents | 自定义组件的配置,具体参加最下方自定义组件示例中的格式 | array | N/A |
使用示例:
`
`
3. 自定义组件示例
3.1 自定义一个组件（根据文本中输入的地址展示图片）
`
type="textarea"
autosize
placeholder="请输入图片地址"
v-model="models[record.model]" :disabled="disabled">
:src="models[record.model]"
fit="scale-down">
`
3.2 定义一个自定义组件的属性配置组件（后面通过插槽挂到表单绘制面板的属性面板中）
`
`
3.3 在动态表单绘制面板中进行配置
`
vue-drag-formdesign 示例
``