# 自定义组件配置说明（components） 在UI引擎的物料协议文件中，"components"数组中的每个对象对应一个自定义组件。以下是其核心配置项的详细说明： #### 组件基本信息配置 组件基本信息是识别和加载自定义组件的基础，核心配置项如下所示： 表1ComponentConfig | 属性名称 | 值类型 | 是否必填 | 说明 | |:---|:---|:---|:---| | name | Object\ | 是 | 组件的名称，请参见[表2]。 | | version | String | 是 | 组件的版本号。 | | component | String | 是 | 组件在使用时的标签名，需与JS文件中导出组件的名称一致。 | | icon | String | 否 | 组件在物料面板显示的图标。 | | description | String | 否 | 组件功能描述信息。 | | devMode | String | 否 | 开发模式，固定值为"proCode"。 | | npm | Object\ | 是 | 组件导入配置，请参见[表3]。 | | group | String | 是 | 组件所属分组标识（需与"snippets"中的"group"一致）。 | | category | String | 否 | 组件分类（自定义，如"业务组件"、"基础组件"）。 | | schema | Object\ | 是 | 组件元数据配置，包括属性、插槽、事件等，请参见[表4]。 | #### 多语言配置 用于定义组件的多语言显示名称，确保不同语言环境下的友好展示。 表2NameConfig | 属性名称 | 值类型 | 是否必填 | 说明 | |:---|:---|:---|:---| | zh_CN | String | 是 | 组件的中文名称。 | | en_US | String | 否 | 组件的英文名称。 | #### 组件导入配置 定义UI引擎如何导入自定义组件，是组件加载的核心配置。 表3NpmConfig | 属性名称 | 值类型 | 是否必填 | 说明 | |:---|:---|:---|:---| | package | String | 否 | 组件库对应的包名。 如果是通过npm安装的组件库，则此项必填。 | | exportName | String | 是 | 组件的名称，需与[表1]中的"component"保持一致。 | | version | String | 否 | 组件的版本号。 | | destructuring | Boolean | 是 | 组件是否需要解构导入，建议固定为true。 | | script | String | 否 | 组件的CDN地址。 | #### 组件元数据配置 "schema"字段定义组件在UI引擎属性面板中的可配置项，即使无相关配置，也需传入空值（空数组/空对象）。 表4SchemaConfig | 属性名称 | 值类型 | 是否必填 | 说明 | |:---|:---|:---|:---| | properties | Array\ | 是 | 组件的属性配置。 如果组件无属性，则至少需要传入一个空数组。 | | slots | Object\ | 是 | 组件提供的插槽列表。 如果无插槽，则需要配置一个空对象。 | | events | Object\ | 是 | 组件提供的事件列表。 如果无事件，则需要配置一个空对象。 | | configure | Object\ | 否 | 组件提供的元信息配置。 | #### 属性配置（schema.properties） "properties"是属性分组数组，每个元素对应"属性"设置面板中的一个可折叠分组（如"基础属性"）。核心配置如下： 表5PropertyGroup（属性分组） | 属性名称 | 值类型 | 是否必填 | 说明 | |:---|:---|:---|:---| | name | String | 是 | 分组的唯一标识。 | | label | Object\ | 是 | 分组的显示名称（如"基础属性"），请参见[多语言配置]。 | | content | Array\ | 是 | 每个属性的配置对象组成的数组。 | 每个对象对应属性面板中的一个可配置项，核心配置如下： 表6PropertyConfig（单个属性配置） | 属性名称 | 值类型 | 是否必填 | 说明 | |:---|:---|:---|:---| | property | String | 是 | 属性的名称，需与[表8]中"props"字段定义的属性名称保持一致。 | | label | Object\ | 是 | 属性在UI引擎"属性"面板显示的标签名。 | | labelPosition | Enum | 否 | 标签的位置，备选值为"left"或"top"，默认为"top"。 | | description | Object\ | 否 | 属性的说明。 配置后鼠标悬浮在标签上会以"tooltip"方式显示说明内容。 | | bindState | Boolean | 否 | 是否支持状态变量绑定。开启后，属性后显示绑定按钮（![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002502271850.png)）。 | | widget | Object\ | 是 | 属性配置器组件，请参见[表8]。 | | disabled | Boolean | 否 | 是否禁用该属性配置。 | | defaultValue | Any | 否 | 属性配置器的默认值。 **注意：此配置项仅对配置器有效，不一定作用于属性的默认值** **。** | "LabelConfig"定义属性在属性面板中显示的文字，核心配置如下： 表7LabelConfig（属性标签配置） | 属性名称 | 值类型 | 是否必填 | 说明 | |:---|:---|:---|:---| | text | Object\ | 是 | 属性面板显示的文字。 | "WidgetConfig"定义属性配置器的具体配置，核心配置如下： 表8WidgetConfig（配置器组件配置） | 属性名称 | 值类型 | 是否必填 | 说明 | |:---|:---|:---|:---| | component | String | 是 | 配置器组件对应的名称（如MetaInput、MetaSwitch），请参见[内置配置器组件参考](https://support.huaweicloud.com/usermanual-idme/idme_ui_0079.html)。 | | props | Object | 否 | 传递给配置器组件的属性（如下拉框的options、输入框的maxlength），请参见[表1](https://support.huaweicloud.com/usermanual-idme/idme_ui_0079.html#ZH-CN_TOPIC_0000002491008946__table16239240124917)。 | #### 事件配置（schema.events） "events"为对象类型，每个属性对应一个事件名，需遵循以下规则： - 事件名必须以"on"开头。 - 中横线连接的事件名需转换为驼峰命名。例如，组件内部发送了一个名为"custom-event"的事件，则在协议中要使用"onCustomEvent"。 - 避免使用下划线拼接多个单词组成的事件名称 - 触发双向绑定需要使用固定的写法为"onUpdate:modelValue"。 事件配置对象结构： ``` interface EventConfig { [onEventName: string]: Object; // 值为事件多语言名称配置 } ``` 表9事件配置对象 | 属性名称 | 值类型 | 是否必填 | 说明 | |:---|:---|:---|:---| | onEventName | Object\ | 是 | 事件要显示的名称配置，请参见[表2]。 | #### 插槽配置（schema.slots） "slots"为对象类型，每个属性对应一个插槽名。结构定义如下： ``` interface SlotConfig { [slotName: string]: { "componentName": "slot" | "Template"; // 固定值 "label": { "zh_CN": string; // 插槽中文名称 } } } ``` #### 元信息配置（schema.configure） "configure"是一个可选配置项，用于定义组件的特殊行为、嵌套规则、快捷键等元信息，无特殊需求时需传入空对象"{}"（该属性不可省略）。如需配置，可参考以下示例和说明： ``` { "configure": { "isContainer": true, // 是否为容器组件（如果为true且提供默认插槽，拖入画布时会自动添加插槽占位） "isModal": false, // 是否为带全局遮罩层的组件（如弹窗） "isPopper": false, // 是否为带弹出层的组件（如下拉框） "nestingRule": { // 组件嵌套规则 "childWhitelist": ["div"], // 允许的直接子组件类型 "parentWhitelist": [], // 允许的父组件类型 "descendantBlacklist": [], // 禁止的深层子组件类型 "ancestorWhitelist": [] // 允许的深层祖先组件类型 }, "rootSelector": ".app", // 画布中选中组件时实际作用的目标节点（支持CSS选择器） "shortcuts": { // 组件快捷键配置 "properties": [ // 可通过快捷键快速设置的属性名 "bordered", "striped" ] } } } ```