下文介绍如何定义属性。
示例
- 开发组件的specs.js文件内容:
export default { "properties": [{ "identifier": "temperature", "defaultValue": 26, "text": "温度", "type": "text", }], "services": [], "events": [] };
属性(properties)设置:类型(type)是text,属性中文名(text)是温度,默认值(defaultValue)是
%26;
,组件唯一标识符(identifier)是temperature的属性。 - 开发入口文件index.tsx的render方法:
render(): JSX.Element { const { temperature } = this.props; return ( <div> 当前温度是:{temperature} </div> ); }
- 执行以下命令运行组件的应用文件:
cd <项目名> # 安装依赖 bnpm install # 启动应用 npm run start
从组件入口文件index.tsx的
this.props
中,通过唯一标识符identifier获取到了tempature这个属性值,并展示在页面中:
名词说明
当属性(properties)设置中包含了options、visible或linkage的字段时,如果该字段以函数类型(function)入参时,涉及如下两个名词:
- 配置值:未设置数据源时,该属性在输入框中的值。在options/visible/linkage的函数形式里,是props参数。
- 运行值:设置了数据源时,该属性从数据源中获得的值。在options/visible/linkage的函数形式里,是propValues参数。
字段options/visible/linkage以函数类型入参的格式如下:
其中function可取字段为options、visible或linkage。
function({ props, propValues }) {
...
}
具体每个函数可支持设置的参数字段,详细内容请参见属性列表。
属性列表
如果把属性(properties)设置"properties": [{"props1":"","props12":"",...},{},...],
中的每一个{"props1":"","props12":"",...}
看作一个入参对象,支持配置的字段(props)如下表所示。
字段 | 类型 | 必须 | 说明 |
---|
字段 | 类型 | 必须 | 说明 |
---|---|---|---|
identifier | string | 是 | 属性标识符,可以在组件使用 this.props[identifier] 获取配置值。
|
text | string | 是 | 属性名称,显示在Web可视化工作台右侧属性编辑栏。 |
description | string | 否 | 当前属性的描述文案,会展示成问号icon。鼠标移动至该icon上可以看到属性的描述。 |
type | string | 是 | 接口类型标识符,设置type时,按需填入,包括以下几种类型:bool、text、number、color、enum、image、group、pureDataSource。详细内容请参见属性类型。 |
options | object/function | 否 | 接口的配置,会传递给type对应的接口。
如果参数类型是function,则传入以下两个参数:
|
defaultValue | any | 否 | 属性初始值。 |
mock | any | 否 | 属性为空时的mock值。与defaultValue的区别是不会展示在接口配置中。 |
visible | boolean/function | 否 | 是否展示该属性。
如果参数类型是boolean,取值:
如果参数类型是function,则传入以下两个参数:
|
linkage | function | 否 | 用作属性联动。接收以下参数:
该函数的返回有三种值:
|
validate | function | 否 | 属性校验。传入以下两个参数:
|
displayIdentifier | string | 否 | 用来判断是否启用当前配置项的prop,最终组件也会获取这个prop值。 |
displayDefaultValue | boolean | 否 | 是否显示属性初始值。
|
displayLinkage | function | 否 | 用作属性display联动。接收以下参数:
该函数的返回有三种值:
|