本文介绍了属性配置支持的类型。

bool:开关

属性的value取值:true/false

属性的配置栏显示的示例:

开关

代码示例:

export default {
  "properties": [{
    "identifier": "switch",
    "defaultValue": false,
    "text": "电源开关",
    "type": "bool",
    "description": "这是电源开关",
  }],
  "services": [],
  "events": []
};

number:数字输入框

属性的value取值:number型数字

属性的配置栏显示的示例:

数字输入框

属性相关的字段:

参数字段 类型 默认 描述
options object / 设置额外参数的字段
options.min number -Infinity 允许的最小值
options.max number Infinity 允许的最大值
options.step number 1 步长值,输入框右侧会出现上下箭头
options.placeholder string null 占位符,没有输入时,在输入框中显示的文案

代码示例:

export default {
  "properties": [{
    "identifier": "temperature",
    "defaultValue": 26,
    "text": "温度",
    "type": "number",
    "options": {
      "min": -10,
      "max": 36,
      "step": 2,
      "placeholder": "请输入温度"
    }
  }],
  "services": [],
  "events": []
};

text:文本输入框

属性的value取值:string型的文本框

属性的配置栏显示的示例:

文本

属性相关的字段:

参数字段 类型 默认 描述
options object / 设置额外参数的字段
options.maxLength number undefined 最大输入长度
options.placeholder string 请输入 占位符
options.readOnly boolean false 是否只读,若为true,则不能手动输入

代码示例:

export default {
  "properties": [{
    "identifier": "temperature",
    "text": "温度",
    "type": "text",
    "defaultValue": "温度文案",
    "options": {
      "placeholder": "请输入温度",
      "maxLength": 10,
      "readOnly": true,
    }
  }],
  "services": [],
  "events": []
};

color:选择颜色

属性的value值:{ r: number, g: number, b: number, a: number }

属性的配置栏显示的示例:

颜色

color属性可提供配置选择颜色功能:单击输入框中左侧的色块icon,弹出如上图所示的调色盘。

属性相关字段:

参数字段 类型 默认 描述
options object / 设置额外参数的字段
options.alpha boolean / number true boolean类型:是否隐藏alpha值配置
  • false:隐藏
  • true:显示

number类型:初始alpha值,默认值为1

注意 数据格式为 { r: number, g: number, b: number, a: number } , 暂不支持其他格式。render的时候,建议手动转换成十六进制。

代码示例:

export default {
  "properties": [{
    "identifier": "color",
    "text": "颜色",
    "type": "color",
  }],
  "services": [],
  "events": []
};

enum:下拉选择

属性的value值为string型的数据,支持的item.type类型:textimageicon-text

属性的配置栏显示的示例:

  • item.type = texttext
  • item.type = imageimage
  • item.type = icon-texticon-text

属性相关字段:

参数字段 类型 默认 描述
options object / 设置额外参数的字段
options.items Array [] 选项列表
options.items[].label string null 选项的展示文字
options.items[].type string,以下值三选一:imageicon-texttext text 选项的展示类型,可以混搭,例如第一个item.type可以是text,第二个item.type可以是image
options.items[].value any undefined 选项的实际值
options.items[].url string null 选项的type为image或icon-text时,图片的地址
options.multiple boolean false 是否可以多选
options.placeholder string null 默认填充文案

代码示例:

{
    identifier: 'valueFont',
    text: '测试',
    type: 'enum',
    options: {
       items: [
         { label: '16', value: '16' },
         { label: '14', value: '14' },
          {
            "type": "image",
            "url": "https://img.alicdn.com/tfs/TB1mAL1khD1gK0jSZFsXXbldVXa-240-16.png",
            "label": "虚线",
            "value": 2
          },
         {
          "type": "icon-text",
          "url": "https://img.alicdn.com/tfs/TB1FNnCj.D1gK0jSZFGXXbd3FXa-34-28.png",
          "label": "圆形端点",
          "value": 1
        },
       ],
       multiple: true,
    },
    defaultValue: 16,
  },

options支持function的写法,可动态调整选项值,如下示例:

export default {
  "properties": [{
    identifier: 'value',
    type: 'text',
    text: '属性值'
  }, {
    identifier: 'directionOption',
    text: '测试',
    type: 'enum',
    disableDataSources: 'all',
    options: ({ props }) => {
      let opt;
      if (props.value === 'boolean'){
        opt = {
          items: [
            { label: '1', value: true },
            { label: '0', value: false },
          ]
        }
      }
      if (props.value === 'number') {
        opt = { 
          items: [
            { label: '>', value: '>' },
            { label: '<', value: '<' },
          ]
        }
      }
      return opt;
    },
  }],
  "services": [],
  "events": []
};

显示效果:

动态下拉框

image:图片

属性的value值:string型的图片URL

image可提供图片地址选择框,即属性的配置栏显示的示例:

图片

属性相关字段:

参数字段 类型 默认 描述
options object / 设置额外参数的字段
options.items Array [] 默认的图片列表

代码示例:

export default {
  "properties": [{
    identifier: 'avatar',
    type: 'image',
    text: '选择图片',
    defaultValue: "https://img.alicdn.com/tfs/TB1S8vZqIj_B1NjSZFHXXaDWpXa-244-244.png",
    options: {
      items: [
      'https://img.alicdn.com/tfs/TB1FNnCj.D1gK0jSZFGXXbd3FXa-34-28.png',
      'https://img.alicdn.com/tfs/TB1mAL1khD1gK0jSZFsXXbldVXa-240-16.png',
    ]
    }
  }],
  "services": [],
  "events": []
};

index.jsrender()

render(): JSX.Element {
        const { avatar } = this.props;

        return (
            <div>
                <img src={avatar} />
            </div>
        );
    }

显示效果:

选择图片

group:成组

将多个属性在右侧编辑栏编成一组。

属性的配置栏显示的示例:

成组

属性相关字段:

参数字段 类型 默认 描述
displayIdentifier string null 表示这个group的checkbox的值,false或者true
displayDefaultValue boolean 配置了这个字段的话,分组名左侧会出现一个checkbox;不配置就不出现该checkbox。false:表示没有勾选该group,group下的属性组不会展示,但是值仍然能在代码中获取到;true:表示勾选了该group,group下的属性组的展示出来。

代码示例:

export default {
  "properties": [{
    identifier: 'arrowGroup',
    text: '流动箭头',
    type: 'group',
    displayIdentifier: 'showArrow',
    displayDefaultValue: true,
    options: {
      items: [
        {
          identifier: 'arrowDirection',
          text: '箭头方向',
          type: 'enum',
          options: {
            items: [
              { label: '向左', value: 'left' },
              { label: '向右', value: 'right' },
            ],
          },
          defaultValue: 'left',
        },
        {
          identifier: 'arrowColor',
          text: '箭头颜色',
          type: 'color',
          defaultValue: { r: 14, g: 155, b: 255, a: 1 },
        },
      ]
    }
  }],
  "services": [],
  "events": []
};

pureDataSource:纯数据源属性

表示该属性是用于设置数据源的。

属性的配置栏显示的示例:

配置数据源

属性相关字段:

参数字段 类型 默认 描述
dataTypes array [] 可以接受的数据源返回的数据类型,如果返回的不是dataTypes里指定的类型,则在可视化工作台里报错。可选值:Array、Boolean、DateTime、Enum、Interger、JSONObject、Number、OneDemesionData、TwoDemesionData、PagingTwoDemesionData、RgbaColor、String
needPropValue boolean false 在options/linkage等函数里,如果属性配置了数据源,且函数实现希望用到propValues,则需要设置needDataSourceValue为true,才能访问到propValues
options object / 设置额外参数的字段
options.dataSourceInfoErrorTip string null 数据源配置错误时的提示文案
options.showDataSourceInfo boolean false 是否展示数据源的来源

代码示例:

export default {
  "properties": [{
    identifier: 'dataSource',
    text: '设备名称',
    type: 'pureDataSource',
    dataTypes: ['Number', 'Enum', 'Boolean'],
    options:{
      dataSourceInfoErrorTip:'接口需要返回数值、布尔或枚举值才能进行风机的状态配置',
      showDataSourceInfo: true,
    },
  }],
  "services": [],
  "events": []
};