配置文件属性

每个组件都需要有一个主配置文件main.json，该文件定义了该组件所需的所有信息，包括基本信息、配置项列表，子组件列表、交互事件。平台通过读取该文件来获取组件的信息和与其进行控制。

该文件位于组件文件夹的config目录下，main表示主配置文件，在包含子组件的情况下，子组件需要自行创建独立的配置文件，命名规则为[module_name].json

需要注意的一点是，每增加一个配置文件，必须对应的添加一个数据文件。

一个完整的配置文件如下所示

export default{
  // 基本信息
  base: {
    name: "配置文件属性-demo",   // 组件名称
    module_name: "configFile",  // 组件id
    version: "1.0.0",           // 版本号
    show: 1  
  },
  width: 200,                   // 组件初始宽度
  height: 70,                   // 组件初始高度
  configuration: [              // 配置项列表
    {
      name: "chart",
      displayName: "组件",
      value: [
        {
          name: "component",              // 自定义的样式配置项 
          displayName: "全局样式",
          value: [
            {
              name: "fontFamily",
              displayName: "字体",
              value: "Microsoft Yahei",
              type: "font"
            },
            {
              name: "fontSize",
              displayName: "大小",
              value: 32,
              type: "number"
            },
            {
              name: "color",
              displayName: "颜色",
              value: "#ddd",
              type: "color"
            }
          ]
        }
      ]
    }
  ],
  triggers: [             // 自定义事件列表
    {
      name: "缩放",
      value: "zoomTo"
    },
    {
      name: "放大",
      value: "zoomIn"
    }
  ],
  presetChildren: [],     // 预设子组件列表
  children: []            // 预设子组件名称
}


{
  "base": {
    "name": "配置文件属性-demo",
    "module_name": "configFile", 
    "version": "1.0.0",
    "show": 1 
  },
  "width": 200, 
  "height": 70,
  "configuration": [ 
    {
      "name": "chart",
      "displayName": "组件",
      "value": [
        {
          "name": "component", 
          "displayName": "全局样式",
          "value": [
            {
              "name": "fontFamily",
              "displayName": "字体",
              "value": "Microsoft Yahei",
              "type": "font"
            },
            {
              "name": "fontSize",
              "displayName": "大小",
              "value": 32,
              "type": "number"
            },
            {
              "name": "color",
              "displayName": "颜色",
              "value": "#ddd",
              "type": "color"
            }
          ]
        }
      ]
    }
  ],
  "triggers": [ 
    {
      "name": "缩放",
      "value": "zoomTo"
    },
    {
      "name": "放大",
      "value": "zoomIn"
    }
  ],
  "presetChildren": [],
  "children": []
}

1. base

该字段构成组件的基本信息

{
  "base": {
    "name": "文本",
    "module_name": "text",
    "version": "1.0.0",
    "show": 1
  },
  ...
}

字段名	说明	必填
name	展示在平台中的名称。注：独立部署用户可以在后台修改名称	true
module_name	组件ID，主配置文件的ID必须与组件文件夹同名	true
version	版本号，遵循semver 格式（x.y.z) 注：每次发布都需要对版本进行升级，来避免不同版本间的冲突。	true
category	关联到平台中相应的类别菜单，只对publish命令发布的组件有效	false
type	子类目名称（如柱形图/折线图/饼图为常规菜单中的子类目），只对publish命令发布的组件有效	false

2. configuration

该字段定义了组件的提供配置列表，通常由多个平台提供的内置控件组成，每一类控件都有自己的json结构，通过组合这些控件，最终形成组件的配置界面

2.1 单个JSON对象

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

{
  "name": string;   				// 配置对象的id，同一层不能重复，作为在运行时获取value的索引
  "displayName": string;    // 配置标题
  "type": string;   				// 控件类型，默认为"number"
  "value": any; 						// 控件值，根据type不同类型有变化
  "tip"?: string;   				// 可选，配置的额外提示信息
  "rule"?: [string, string, string][]   // 可选，控件展示规则 符合规则时才会显示
}

⚠️注意：独立部署版本 < 3.15 的配置需要加下划线，并且没有config属性，可以把config中的属性直接写在外层，如下

{

"_name": "text",

"_displayName": "内容",

"_type": "input",

"_value": "xxx",

"_options": []

}

2.2 配置项分组

良好的分类划分和命名利于用户使用，平台也提供分组功能，一个没有type属性并且value为数组的json对象会被解析为一个分组，更多分组信息或分组遇到问题查看这里。

[
  {
    "name": "component",
    "displayName": "标题文本",
    "value": [
      {
        "name": "fontFamily",
        "displayName": "字体",
        "value": "Microsoft Yahei",
        "type": "font"
      },
      {
        "name": "fontSize",
        "displayName": "大小",
        "value": 32
      },
      {
        "name": "color",
        "displayName": "颜色",
        "value": "#ddd",
        "type": "color"
      }
    ]
  },{
    "name": "component",
    "displayName": "内容文本",
    "value": [
      {
        "name": "fontFamily",
        "displayName": "字体",
        "value": "Microsoft Yahei",
        "type": "font"
      },
      {
        "name": "fontSize",
        "displayName": "大小",
        "value": 32
      },
      {
        "name": "color",
        "displayName": "颜色",
        "value": "#ddd",
        "type": "color"
      }
    ]
  }
]

Live Example

https://codepen.io/fireflylight66/embed/MWejeZO?editors=0010

2.3 rule 显隐规则

该选项提供一种规则来支持根据用户的选择动态改变配置，语法类似于常用的if条件判断表达式，更多配置规则查看这里

rule: [name, condition, value][]

name：string 同级下其他控件对象的name
condition： '$eq' | '$neq' $eq表示name对应控件的value等于某个值时返回true， $neq则相反
value：string 表示表达式的右侧

Example

export default{
	...
  configuration: [
    {
      name: "action",
      displayName: "方向",
      type: "select",
      value: "left",
      config: {
        options: [
          {
              name: "左",
              value: "left"
          },
          {
              name: "右",
              value: "right"
          }
        ]
      }
    },
    {
      // 当action的value为"left"时显示
      rule: [
        [
          "action",       //依赖的配置项的名字
          "$eq",          //比较操作符
          "left"          //依赖的配置项的值
        ],
      ],
      name: "left",
      displayName: "左",
      type: "number",
      value: 0
    },
    {
      // 当action的value为"right"时显示
      rule: [
        [
          "action",
          "$eq",
          "right"
        ]
      ],
      name: "right",
      displayName: "右",
      type: "number",
      value: 0
    }
  ],
  ...
}

{
  ...
	configuration: [
    {
      "name": "action",
      "displayName": "方向",
      "type": "select",
      "value": "left",
      "config": {
        "options": [
          {
            "name": "左",
            "value": "left"
          },
          {
            "name": "右",
            "value": "right"
          }
        ]
      }
    },
    {
      "rule": [
        [
          "action",
          "$eq",
          "left"    
        ]
      ],
      "name": "left",
      "displayName": "左",
      "type": "number",
      "value": 0
    },
    {
      "rule": [
        [
          "action",
          "$eq",
          "right"
        ]
      ],
      "name": "right",
      "displayName": "右",
      "type": "number",
      "value": 0
    }
  ]
	...
}

2.4 禁用配置项

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

有时候用户不需要一些功能，想要关闭他，使用该选项可以让用户有选择权，在列表中添加一个name为show的对象就可以简单实现效果

{
  name: "show";     // 必须是show
  value: boolean;   // true表示
}

需要注意的是，禁用配置项只对一组配置项有效果，所以必须放数组中，参考下面的例子。

此外，用户开启和关闭配置项只会改变value值，具体的视图展示逻辑还是需要在代码中判断。

Live Example

https://codepen.io/fireflylight66/embed/mdEVdMr?editors=0010

3. children

该属性定义当用户在使用该组件时可以添加哪些子组件，不填表示所有子组件

string[] 子组件id数组

4. presetChildren

该属性可以设定当用户在大屏上添加一个新组件时，默认为这个新组件添加哪些子组件。某些场景下，如添加地球组件时显示一些卫星，卫星就是一个子组件

string[] 子组件id数组

5. triggers

该属性描述了组件提供哪些自定义动作给外部使用

{
  "name": string,   // 动作名称
  "value": string   // 动作id
}

6. commonAssets

该属性描述了组件业务代码中使用了哪些公共资源

支持	平台	@easyv/cli	@easyv/vue-builder	@easyv/react-component-builder
版本	v7.18	v1.13.0	v0.8.0	v0.21.0

当前支持相对地址和绝对地址，暂时不支持文件目录

[
    "https://easyv.assets.dtstack.com/thumb/6fsmlefd0o_1626347751945_ogtbg49bym.gif",
    "/data/121/1738040/img/78rifi7y2j_1679556143710_4hdm50c5up.jpg"
]

上述资源建议相对地址，放到 common-assets 路径下，便于大屏/终端导入导出携带资源

例如：

cli 构建工具改造，增加 commonAssets 配置项 commonAssets as string[]
cli 文件中打包增加一个新的json配置文件 easyv pack :module_name
cli 组件上传时会自动在接口添加 commonAssets 配置 easyv publish :module_name --host http://workspace.easyv.test
手动导入组件（官方+自定义）把组件配置数据上传给后端 *.constant 文件后台上传
导出导入（大屏、终端、模板、资源、官方组件、自定义组件）把后端传给前端的组件配置数据本地下载，塞入zip文件中，等待下次导入时上传。

如遇其他使用问题，可扫描下方二维码，获取更多产品支持~