核心概念

每个组件都需要有一个主配置文件，该文件定义了该组件所需的所有信息，包括初始宽高、配置项列表，交互事件、数据项等。平台通过读取该文件来获取组件的信息和与其进行控制。
一个完整的配置文件如下所示：

{
  "info": {
    "name": "test",
    "alias": "测试组件",
    "version": "1.0.0",
    "expFieldPath": []            // 表达式字段路径
  },
    "w": 100,                                    // 组件初始宽度
  "h": 200,                                    // 组件初始高度
  "configuration": [],            // 配置项列表
  "events": {}
}

configuration

该字段定义了组件的提供配置列表，最外层必须由官方指定的 *block、group、tabs *三类控件作为容器，内部通常由多个独立控件组成，每一类控件都有自己的json结构，通过组合这些控件，最终形成组件的配置界面

1. 单个JSON对象

一个控件的json对象由以下参数构成，更多的控件类型查看这里

{
  "name"?: string;                       // 配置属性名称
  "displayName"?: string;        // 配置显示名称
  "type": string;                       // 控件类型
  "value": any;                             // 控件值，根据type不同类型有变化
  "tip"?: string;                       // 配置的额外提示信息
  "config"?: any                            // 控件配置项，根据type不同类型有变化
  "rules"?: any[][]                        // 显隐匹配规则
  "ruleName"?: string                    // 兜底的目标控件名称，优先级为：ruleName | name
  "ruleType"?: '$and'|'$or'      // 逻辑条件之间的关系
  "dispatchRule"?: boolean        // 是否派发显隐规则
}

2. 容器

2.1 块容器

type="block"且value为数组对象

{
  "type": "block",
  "value": [
    {
      "name": "fontSize",
      "displayName": "文本大小",
      "type": "number",
      "value": 16
    },
    {
      "name": "color",
      "displayName": "文本颜色",
      "type": "color",
      "value": "#00ff00"
    }
  ]
}

2.2 组容器

type="group"且 定义了name字段 且value为数组对象

{
  "name": "titleConfig",
  "displayName": "标题",
  "type": "group",
  "value": [
    {
      "name": "content",
      "displayName": "标题内容",
      "type": "input",
      "value": "翻牌器标题",
      "tip": "可在数据中配置标题内容，key值为'name'，优先取数据配置",
      "config": {
        "placeholder": "请输入标题内容"
      }
    }
  ]
}

2.3 选项卡容器

type="tabs" 且 value为数组对象

{
  "type": "tabs",
  "value": [
    {
      "displayName": "全局",
      "name": "globalConfig",
      "type": "tab",
      "value": [
        {
          "name": "globalColor",
          "displayName": "全局颜色",
          "value": "#FFFFFF",
          "type": "color"
        }
      ]
    },
    {
      "displayName": "坐标轴",
      "name": "axisConfig",
      "type": "tab",
      "value": [
        {
          "type": "number",
          "name": "globalSize",
          "displayName": "横向偏移",
          "value": 0
          }
      ]
    }
  ]
}

3. rules 显隐规则

该配置项旨在解决控件之间的动态显示隐藏问题，rules为二维数组，一维数组之间的关系默认是and，所有条件成立，返回true，反之就是false

rules: [name, condition, value][]

condition

ruleType
条件之间的逻辑关系，默认为 $and
$and : 表示rule规则中的多条规则需要同时满足才显示
$or : 表述rule规则中的多条规则只要满足其中一条就可以显示

dispatchRule: 派发规则（发起者）

3.1 简单版示例

{
  "type": "block",
  "value": [
    {
      "displayName": "游戏开关",
      "dispatchRule": true,
      "name": "play",
      "type": "boolean",
      "value": false
    },
    {
      "displayName": "游戏开启",
      "name": "onPlay",
      "type": "input",
      "value": "on",
      "rules": [
          [
              "play",
              "eq",
              true
          ]
      ]
    },
    {
      "displayName": "游戏关闭",
      "name": "offPlay",
      "type": "input",
      "value": "off",
      "rules": [
          [
              "play",
              "eq",
              false
          ]
      ]
    }
  ]
}

3.2 进阶版

参考Rules进阶章节

4. 禁用配置项

该选项允许用户禁用某一类配置

禁用配置项只对一组配置项有效果，所以必须放组容器中

{
  "name": "titleConfig",
  "displayName": "标题",
  "type": "group",
  "value": [
    {
      "name": "display",                // 必须是display
      "value": false                        // boolean类型
    },
    {
      ...
    }
  ]
}

禁用：

启用：