# 配置说明

设计器支持通过配置扩展组件、属性、数据源，可参考[配置示例](https://fyl080801.gitee.io/vjdesign/data/demo-profile.json)

| 配置       | 说明                 |
| ---------- | -------------------- |
| components | 设计器支持的组件集合 |
| properties | 设计器支持的属性     |
| datasource | 设计器支持的数据源   |

## 组件 components

组件成员具有如下属性

- **name** - 组件名称 `string`

组件在 vue 项目中的名称，vue 组件的标签名或 name 属性值，如果在设计器 components 属性中定义了别的名称，应该跟定义的名称保持一致

- **label** - 组件显示名称 `string`

组件在设计器设计视图左侧工具箱里显示的名称

- **group** - 所属分组 `string`

组件在设计器设计视图左侧工具箱里所属的分组

- **properties** - 组件属性集合 `array`

组件在设计器中具有的属性数组，成员支持字符串和对象，成员如果是字符串则该属性使用设计器配置里属性的定义，如果是对象则此属性是组件单独定义的

::: tip 示例

通过以下定义可实现设计器支持一个 input 组件，组件可编辑 `样式` `水印` `类型` 属性

:::

```json
{
  "component": "input",
  "properties": [
    "fieldOptions.style",
    "fieldOptions.attrs.placeholder",
    { "name": "fieldOptions.domProps.type", "label": "类型", "group": "组件" }
  ]
}
```

属性定义方式见：[属性](#属性)

- **designer** - 设计器类型 `string`

定义该组件在设计器视图下，组件从工具箱拖到设计区域后呈现的形式

> 仅在设计时原组件会显示成设计器类型相应的元素，不会影响使用动态表单呈现时候的真实组件显示和功能

设计器内置支持以下设计器类型

| 设计器         | 说明                                                                                                                                                                                                                           |
| -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| default (默认) | 一般组件设计器，显示一个标签名和删除按钮                                                                                                                                                                                       |
| container      | 具有容器行为的组件，设计器视图会在该组件内呈现一个容器的区域，可将其他组件拖动到这里作为组件的成员                                                                                                                             |
| classContainer | 和 container 类似，但是在设计器呈现的时候会把组件的 class 复制到容器上，在编辑某些局部类组件时如果想让设计器呈现出和实际组组件类似的样式时可使用这个设作为组件的设计器，例如 `el-row`、`el-col` 这类在这设计器也要显示行列样式 |
| divElement     | 设计器在呈现该组件时直接以层元素代替原组件，当原组件在设计器下显示不正常时可使用此设类型                                                                                                                                       |
| divContainer   | 设计器在呈现该组件时以层元素代替原组件，并且支持将组件拖到内部作为下级成员                                                                                                                                                     |

如果不定义设计器类型则使用 default 作为默认的类型

## 属性

在 `properties` 设置数组，在 `properties` 里设置的属性可在组件的属性集合里直接用 `name` 定义的字符串增加组件相应可编辑属性，数组成员具有如下属性

- **name** 属性名 `string`

组件属性的完整路径，vue 在渲染组件时调用 `createElement` 方法，该方法有三个参数签名，其中第二个参数就是组件的属性，具体参考[虚拟 DOM](https://cn.vuejs.org/v2/guide/render-function.html#%E8%99%9A%E6%8B%9F-DOM)和[深入数据对象](https://cn.vuejs.org/v2/guide/render-function.html#%E6%B7%B1%E5%85%A5%E6%95%B0%E6%8D%AE%E5%AF%B9%E8%B1%A1)相关概念

设计器和动态表单采用 `fieldOptions` 作为传递给渲染函数的参数

::: tip 示例

`fieldOptions.props.value` - 组件 value 属性

`fieldOptions.domProps.innerText` - 组件 html 内部文本

`fieldOptions.on.click` - 组件点击事件

`fieldOptions.slot` - 组件命名槽，实现组件在父级呈现位置

:::

除此之外，属性名还支持 vjform 的渲染处理，例如通过以下定义可在设计器中设置组件的 model 属性实现 v-model

```json
{ "name": "model", "label": "数据", "group": "基础" }
```

- **label** 显示名称 `string`

组件属性编辑器显示名称

- **group** 属性分组 `string`

组件属性分组

- **description** 属性描述（未实现） `string`

组件编辑器显示的文字说明

- **editor** 编辑器类型 `string` | `object`

组件属性的编辑器类型，定义在编辑组件属性时采用何种交互方式实现值的变更

设计器内置支持以下编辑器类型

| 类型     | 说明                                               |
| -------- | -------------------------------------------------- |
| default  | 使用文本输入框编辑属性值，支持输入文本和转换表达式 |
| checkbox | 使用 checkbox 设置属性值，用于设置布尔值           |
| select   | 使用下拉列表设置属性值                             |

当编辑器类型是一个对象时，支持此组件使用该类型的编辑器传递 options 设置编辑器的属性

- **default** 属性的默认值 `any`

当组件被拖到设计区后自动附加的默认值

- **editable** 属性在设计器是否可编辑 `boolean`

组件属性是否可在属性编辑器中编辑，默认是 `true`，如果属性不定义 `label` 也是不能编辑的

### 编辑器类型属性

- **default**

  - placeholder - 设置文本输入水印

- **select**

  - items - 设置选择项

::: tip 示例

设置属性 `fieldOptions.props.type` 在编辑时可选择 `info` `success` `error` 三个值

:::

```json
{
  "name": "fieldOptions.props.type",
  "label": "类型",
  "group": "组件",
  "ediotr": {
    "name": "select",
    "options": {
      "items": [
        { "value": "info", "label": "消息" },
        { "value": "success", "label": "成功" },
        { "value": "error", "label": "错误" }
      ]
    }
  }
}
```

## 数据源

数据源集合定义了设计器支持的数据源类型，成员包括以下属性

- **type** 数据源类型 `string`

- **label** 显示名称 `string`

- **properties** 数据源属性集合 `array`

定义方式和组件的属性一样