自定义组件结构

• 自定义组件包，目录结构如下。

  // 组件目录结构my-package.zip├── components|   └── my-component                      // my-component 组件|       ├── custom-property-editor        // 自定义属性编辑控件（可选）|       │   └── index.js                  //|       ├── custom-panel                  // 自定义属性面板（可选）|       │   └── index.js                  //|       ├── design-time                   // 组件设计态代码（可选）|       │   └── index.js                  //|       ├── resources                     // 组件图片资源（可选）|       │   └── default.png               //|       ├── index.js                      // 组件运行态代码|       ├── my-component.json             // 组件定义文件├── manifest.json                     // 组件清单文件└── README.md                         // 组件包说明文件

  

  • 组件zip包的目录及文件的名称不能是中文，且编译后的组件包大小应在1M以内。
  • 组件名遵循Vue组件命名，并且要在当前应用中唯一。您可参考Vue框架指南定义Vue组件代码，并参考Vue组件打包指南对Vue组件进行打包，打包后才能使用。

  表1 组件包文件说明

  目录/文件	是否可选	描述
  custom-property-editor/index.js	可选	自定义属性的编辑控件。
  custom-panel/index.js	可选	自定义属性的面板。
  design-time/index.js	可选	组件设计态。
  resources目录	可选	组件相关静态资源，如组件图片。
  index.js	-	组件运行态。
  my-component.json	-	组件定义文件。

• 组件包样例。

  单击链接，可下载样例包。

  图1 目录格式
  
• 组件描述文件。

  组件描述文件test-project.json是自定义组件配置面板的规格文件，用于校验和辅助编写自定义组件配置面板json文件。该文件编写需遵循JSON Schema规范，以便于与主流的编辑器（vscode、atom、sublime text和webstorm）集成。

  组件描述文件在插件包位置如下：

  图2 组件描述文件
  
  组件描述文件，既可以在插件包开发时修改，也可以在插件包编译以后修改。编译之后，组件描述文件的位置如下所示。

  图3 编译后的组件描述文件位置
  
  图4 组件描述
  

  样例代码：

  {    // 下面的属性会用于页面组件右侧属性中    "name": "my-component",    "title": "%component.title%",    "description": "%component.description%",    "category": "add-on",    "icon": {        "default": "./resources/default.png",        "hover": "./resources/hover.png"    },    // ... 此处省略了组件的其他属性}

  表2 组件约束

  参数名	功能	限制	描述
  name	组件名	需要以英文字母开头，支持数字与特殊字符“_”、“-”，不支持中文，长度在64字符以内。 建议由厂商名_组件名_版本号组成，例如aaa_img-button_1.1.1。	组件名会存放在界面元数据的type中，如type: "my-component1"。 配置文件中的名称，用于后台元数据存储、解析等。 zip包名应该与name值保持一致，例如此处name为img-button，zip包名必须为img-button.zip。
  title	组件别名	建议简短并能展示组件特性，长度在100字符以内。	组件别名，会显示在标准页面开发界面左侧“组件”页签下的扩展组件中，建议简短并能展示组件特性。
  description	组件描述	长度在200字符以内。	当鼠标悬停时，展示的组件描述信息。
  category	组件分类	使用平台提供的组件分类。	为了保持界面构建器组件分类一致性，请使用平台提供的组件分类，具体请参考表3。
  icon	组件图标	png格式，包括2个（未选中时和选中时），每个png的大小在16K以内。	在页面中展示的图标，自动压缩到40*40。
  其他	包大小	编译后的组件包大小，需要在1M以内。	-

  表3 组件分类

  平台分类	说明
  navigation	导航组件，例如菜单、工具栏或侧栏。
  data	数据组件，可以查看和/或编辑应用程序中的数据，例如Form、Table或List。
  common	通用组件，例如标签、图片、标题或段落。
  container	容器组件，可以包含其他组件的容器。例如，栅格布局组件Row/Col、流式布局组件、Panel、Tabs、Collapse或WidgetContainer。
  input	显示和编辑实体属性，例如文本框、日期选择器。
  file	文件处理组件。例如，文件上传/下载组件、图片浏览组件或PDF预览组件。
  button	触发动作的按钮，例如保存按钮、页面跳转按钮。
  report	聚合数据并以表格或图表的形式显示，例如图表、透视表。
  widget	业务卡片。
  add-on	扩展组件。