配置说明

设计器支持通过配置扩展组件、属性、数据源，可参考配置示例 (opens new window)

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

组件 components

组件成员具有如下属性

• name - 组件名称 string

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

• label - 组件显示名称 string

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

• group - 所属分组 string

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

• properties - 组件属性集合 array

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

示例

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

{
  "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 (opens new window)和深入数据对象 (opens new window)相关概念

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

示例

fieldOptions.props.value - 组件 value 属性

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

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

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

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

{ "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 - 设置选择项

示例

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

{
  "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

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