组件配置_多端低代码开发平台魔笔-阿里云帮助中心

文本介绍组件配置的详细定义。

组件配置定义了组件的各种平台配置，用于平台识别组件，使平台用户可以利用组件进行页面搭建。

组件配置绑定在组件的 config 静态属性上，参考2. 自定义组件说明。

配置定义

定义：

import { API_VERSION, Category, PLATFORM_H5, PLATFORM_PC } from './api';

export default {
  apiVersion: API_VERSION,
  version: '1.0',
  isContainer: false,
  title: '',
  componentName: 'MobiPcComponentABC',
  supportPlatform: [PLATFORM_PC, PLATFORM_H5],
  category: Category.COMMON,
  configure: [],
  rules: []
};

字段：

字段	类型	含义	备注
version	string	组件版本	x.y.z 格式。
apiVersion	string	组件依赖的平台API版本	x.y.z 格式。
upgrade	function	组件升级处理方法	组件升级时，用于升级组件模型数据。定义见 upgrade 升级回调。
title	string	组件展示名称
icon	string	组件icon url	自定义组件的icon在平台创建时设置，目前不生效。
componentName	string	组件在平台的唯一标示	不可与其他组件重复。自定义组件在初始化项目时设置。
supportPlatform	Array<string>	组件支持的平台类型	PLATFORM_PC：pc，桌面Web平台。 PLATFORM_H5：h5，移动端H5平台。 PLATFORM_MINI：mini，小程序平台缺省：由应用类型决定，Web类型的应用为pc，小程序类型的应用为mini。
category	string	组件分类	自定义组件默认归为自定义组件一类，目前不生效。
isContainer	boolean	是否是容器组件	true：容器组件。 false：非容器组件。
configure	Array<PropGroup>	属性组配置	用于定义组件有哪些属性组。定义见 PropGroup 属性组。
rules	Array<PropRule>	错误检查配置	平台解析此字段来进行针对组件的错误检查。定义见 PropRule 错误检查配置。

upgrade 升级回调

组件升级时，用于升级组件模型数据。会调用多次，传递 handler 参数时，需要在实现中升级模型。

定义如下：

type Version = string;

type NeedUpgradeFunc = (from: Version, to: Version) => boolean;

export interface SchemaHandler {
  get: (key: string) => any;
  set: (key: string, value: any) => void;
  remove: (key: string) => void;
}

type UpgradeFunc = (from: Version, to: Version, handler: SchemaHandler) => boolean;

interface BaseConfig {
  upgrade?: NeedUpgradeFunc & UpgradeFunc;
}

参数：

字段	类型	含义	备注
from	string	从哪个版本升级	x.y.z 格式。
to	string	升级到哪个版本	x.y.z 格式。
handler	object	组件模型数据的处理方法	get：获取字段key的值。 set：设置字段key的值。 remove：移除字段key。可空，没有传递时，表示仅判断是否需要升级；传递此参数时，表示需要对模型进行升级。

返回值： boolean 类型，含义如下：

传递 handler 参数时， true 表示已升级模型； false 表示不需要升级。
未传递 handler 参数时，true 表示需要升级模型，平台后续会再次调用此方法并传递 handler 参数；false 表示不需要升级。

PropGroup 属性组

一组属性配置。

定义：

interface PropGroup {
  title: string;
  type: 'group';
  display: 'block' | 'accordion';
  items: Array<PropConfig>;
}

字段：

字段	类型	含义	备注
title	string	分组名称
type	string	配置类型：组	固定值 'group'.
display	'block' \| 'accordion'	分组展示形式	block：垂直平铺展示。 accordion：与block类似，但是分组名称右侧会有一个箭头，可以收起展开本组的属性配置。
items	Array<PropConfig>	本组内的属性配置	定义见 PropConfig 属性配置。

PropConfig 属性配置

声明组件的一个属性配置。

定义：

interface TargetElement {
  getProps: () => {
    getPropValue: (propKey: string) => any;
  };
}

export interface PropConfig {
  // 属性名称
  name: string;
  // 属性标题
  title: string;
  display: 'inline' | 'block' | 'none';
  defaultValue?: any;
  setter: {
    // setter的类型
    type: string;
    // setter的props
    props: object;
  };
  condition?: (target: TargetElement) => boolean;
}

字段：

字段	类型	含义	备注
name	string	属性的名称，也是组件Props中的key
title	string	属性配置的标题，展示给平台用户，说明属性的目的
display	'inline' \| 'block' \| 'none'	此属性配置展示的形式	inline：属性标题和属性设置器在同一行展示。 block：属性标题和属性设置器分行展示，属性设置器在下。 none：不展示此属性配置，和defaultValue字段搭配使用，可以固定属性
setter.type	string	属性设置器的标示	不同的标示对应不同的属性设置器。具体属性设置器请参考属性设置器。
setter.props	object	属性设置器的参数	部分属性设置器支持参数配置，以达到不同的属性配置效果。具体属性设置器请参考属性设置器。
condition	function	属性设置器展示的条件判断方法	根据target参数可以获取组件props的值，基于当前的props值来判断是否需要此属性配置。缺省：一直展示。返回true：展示。返回false：不展示。

PropRule 错误检查配置

声明组件的一个错误检查配置。

定义：

export interface FormatObj {
  name: FORMAT; // 所使用的format
  args: any[]; // 当前format的额外参数,如{inject: [{type: 'TEXT'}]}
  condition?: string; // 当前format的condition,会替换整体condition
}

export interface PropRule {
  type: 'object';
  format: FORMAT | FormatObj; // 错误检查的类型
  description: string; // 错误信息
  propName?: string; // props.xxx
  alias?: string; // propName的别名，用于说明字段意图
  level: 'ERROR';
  condition?: string;
}

字段：

字段	类型	含义	备注
type	'object'	检查类型为对象	固定值 'object'。
format	FORMAT \| FormatObj	错误检查类型	参考错误检查类型。
description	string	错误描述
propName	string	要检查的props参数	格式是props.xxx。
alias	string	要检查的props参数别名，方便用户理解
level	'ERROR'	错误级别	目前固定为 'ERROR'。
condition	string	启用条件	缺省一直启用。形式是一个字符串。示例：'arguments[0].multiple' 其中arguments[0]表示props，也就是说props参数multiple为true时启用。