下文介绍如何定义属性。

示例

  1. 开发组件的specs.js文件内容:
    export default {
      "properties": [{
        "identifier": "temperature",
        "defaultValue": 26,
        "text": "温度",
        "type": "text",
      }],
      "services": [],
      "events": []
    };

    属性(properties)设置:类型(type)是text,属性中文名(text)是温度,默认值(defaultValue)是 %26;,组件唯一标识符(identifier)是temperature的属性。

  2. 开发入口文件index.tsx的render方法:
    render(): JSX.Element {
        const { temperature } = this.props;
    
        return (
            <div>
                当前温度是:{temperature}
            </div>
        );
    }
  3. 执行以下命令运行组件的应用文件:
    cd <项目名>
    
    # 安装依赖
    bnpm install
    # 启动应用
    npm run start

    从组件入口文件index.tsxthis.props中,通过唯一标识符identifier获取到了tempature这个属性值,并展示在页面中:

    组件效果

名词说明

当属性(properties)设置中包含了optionsvisiblelinkage的字段时,如果该字段以函数类型(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,则传入以下两个参数:

  • props:属性的配置值
  • propValues:属性的运行值,需要返回object
defaultValue any 属性初始值。
mock any 属性为空时的mock值。与defaultValue的区别是不会展示在接口配置中。
visible boolean/function 是否展示该属性。

如果参数类型是boolean,取值:

  • true: 展示
  • false:不展示

如果参数类型是function,则传入以下两个参数:

  • props:属性的配置值
  • propValues:属性的运行值,返回truefalse
linkage function 用作属性联动。接收以下参数:
  • changedProps:发生改变的属性
  • props:当前属性变化后的配置值
  • propValues : 当前属性变化后的运行值
  • prevProps:当前组件未变化前,属性的配置值
  • revPropValues : 当前组件未变化前,属性的运行值

该函数的返回有三种值:

  • null:表示清空当前属性
  • undefined:表示保持当前属性的值
  • 其他:设置该属性的值为其他值
validate function 属性校验。传入以下两个参数:
  • props
  • propValues
displayIdentifier string 用来判断是否启用当前配置项的prop,最终组件也会获取这个prop值。
displayDefaultValue boolean 是否显示属性初始值。
  • true: 显示
  • false:不显示
displayLinkage function 用作属性display联动。接收以下参数:
  • changedProps:发生改变的属性
  • props:组件配置值
  • propValues : 组件运行值
  • prevProps:当前组件未变化前,属性的配置值
  • revPropValues : 当前组件未变化前,属性的运行值

该函数的返回有三种值:

  • null:表示清空当前属性
  • undefined:表示保持当前属性的值
  • 其他:设置该属性的值为其他值