本文档示例为开发者的自定义组件提供功能开发的参考，主要介绍三个蓝图编辑器内容的实现方法：事件触发、导入数据接口、添加交互动作。

前提条件

本文档功能实现需要用户操作使用桌面版开发工具，详情请参见开发工具使用说明中的桌面版开发工具使用说明。

背景信息

本文档适用用户在开发自定义组件的时候，为了使得自定义组件能同样使用DataV专业版中蓝图编辑器的功能，需要使用与蓝图编辑器一致的规则开发自定义组件。在使用开发者工具创建完成组件后，本地的组件包文件夹下会生成index.js和package.json文件，本文三点内容的实现需要在这两个文件中修改内容来操作。

理解交互功能

当前案例实现需要用户将交互转成节点和边的关联关系，需要使用的组件有满足需求的事件和动作才能进行配置，否则就无法实现。
  • 组件：组件包含两种能力，事件抛出能力和动作执行能力。本案例使用了数字翻牌器组件来举例说明。
  • 蓝图编辑器：通过运用逻辑节点编排的方式，将上游组件的交互/事件与下游组件的执行动作绑定，从而实现页面内组件间的交互联动。
    说明 蓝图编辑器配置完成后需要在预览页查看配置效果。

事件触发

在自定义组件中实现蓝图编辑器中事件触发功能，以下图数字翻牌器组件的当前值变化事件为例。事件触发案例
  1. 在使用开发者工具创建完成组件后，打开package.json文件。
  2. 在package.json文件中搜索datav字段下的events字段。
    说明 每一个蓝图编辑器中的事件必须要和自定义组件中events字段中定义的事件保持一致，否则编辑器无法识别。
  3. 在当前events字段中定义事件，自定义修改event-name事件名下的描述和value字段名下的描述。
    事件触发文件内容修改
    说明 事件名和字段名都可自定义多个，自定义设置越多，蓝图编辑器节点页面显示事件越多。
  4. 打开index.js文件，设置代码中的emit的事件名，如下方所示。
    this.emit('event-name', obj);
    说明 emit中的事件名要和package.json文件中的事件名保持一致，传递参数必须是object类型，可以传递多个字段。

导入数据接口

在自定义组件中实现蓝图编辑器中导入数据接口动作，以下图数字翻牌器组件的导入数据接口动作为例。导入数据接口动作
  1. 在使用开发者工具创建完成组件后，打开index.js文件。
  2. 在index.js文件中搜索datav字段下的render字段。
  3. 在当前render字段中自定义设置导入数据接口动作代码逻辑。
    导入数据接口代码逻辑
    说明 动作逻辑都可自定义多个，自定义设置越多，蓝图编辑器节点页面显示动作越多。

添加交互动作

在自定义组件中实现蓝图编辑器中多个交互动作，以下图数字翻牌器组件的显示和隐藏动作为例。添加交互动作示例
  1. 在使用开发者工具创建完成组件后，打开package.json文件。
  2. 在package.json文件中搜索datav字段下的publicHandler字段。
  3. 在当前publicHandler字段中自定义设置显示和隐藏的描述，但是需要与index.js文件中的方法名保持一致。
    隐藏显示动作自定义
    说明 动作逻辑都可自定义多个，自定义设置越多，蓝图编辑器节点页面显示动作越多。
  4. 打开index.js文件，设置代码中的container的内容，如下方所示。
    显示隐藏动作字段名this.container.show(); //显示代码，开发者自定义

    this.container.hide(); //隐藏代码，开发者自定义

    说明 container中的字段名要和package.json文件中的字段名保持一致。