自定义组件时，如何设置交互事件的输出变量

操作场景

开发者自定义组件时，可设置交互事件的输出变量，如图1所示，AstroCanvas支持将事件的输出变量（如“selectValue”）绑定页面级的全局变量（如“status”）。

图1 事件输出参数绑定全局变量

实现逻辑

1. 自定义组件开发过程如下，也可以直接单击下载链接，获取自定义组件示例包“SelectWidget.zip”。
   1. 在组件的“global_SelectWidget.editor.js”文件中，新增eventConfig配置。

      eventConfig其实是一个对象，里面包含组件触发的自定义事件、自定义事件的说明以及事件对外输出的变量名、变量含义。

       eventConfig: {
          sendSelect: {
            desc: { zh_CN: "下拉框选中值发生变化", en_US: "Select Change" },
            fields: [
              {
                name: "selectValue",
                desc: { zh_CN: "选中值", en_US: "selected value" },
              },
            ],
          },
        },

      表1 SelectWidget.zip字段说明

      字段名	字段说明
      sendSelect	自定义的事件名为“sendSelect”，必须配置。 须知： 需要在组件“.js”文件逻辑代码中，使用“Studio.registerEvents()”方法注册该事件，并使用“thisObj.triggerEvent()”方法触发该事件。
      desc	事件的中英文描述，可描述事件的具体场景、作用，必须配置。
      fields	变量列表，必须配置，即事件对外输出的变量集合，包含变量名、描述等，必须配置。
      fields[0].name	表示变量名，例如“selectValue”。 须知： 在组件“.js”文件逻辑代码中，使用“thisObj.triggerEvent()”方法触发该事件时，要将变量字段传入发送的data中。
      fields[0].desc	变量的中英文描述，可选配置。

      

      “Studio.registerEvents()”和“thisObj.triggerEvent()”为AstroZero预置的API，相关说明请参见高级或AstroCanvas页面组件中预置的API。

   2. 在组件的“global_SelectWidget.js”文件中，注册名称为“sendSelect”的事件。

      示例代码如下：

      var global_SelectWidget = StudioWidgetWrapper.extend({
        /*
         * Triggered when initializing a widget and will have the code that invokes rendering of the widget
         */
        init: function () {
          var thisObj = this;
          thisObj._super.apply(thisObj, arguments);
          thisObj.render();
          if (typeof Studio != "undefined" && Studio) {
            Studio.registerEvents(
              thisObj,
              "sendSelect",
              { zh_CN: "选中值发生变化时触发", en_US: "Select Choose" },
              []
            );
          }
        },

   3. 在组件的“global_SelectWidget.ftl”文件中，定义选中值发生变化时绑定sendSelect事件。
      示例代码如下：

      <el-select v-model="selectConfObj.selectValue" :disabled="selectConfObj.disabled"
               @change="sendSelect" 
               :placeholder="selectConfObj.placeholder" filterable popper-class="selectWidget">
               <el-option v-for="item in selectConfObj.options" :key="item.value" :label="item.label" :value="item.value">
               </el-option>
            </el-select>

   4. 在组件的“global_SelectWidget.js”文件中，触发名称为“sendSelect”的事件，且data中包含在1.a中定义的fields字段名“selectValue”。

      示例代码如下：

      sendSelect: function () {
        var params = {
          selectValue: this.selectConfObj.selectValue,
        };
        thisObj.triggerEvent("sendSelect", params);
      };

2. 参考上传自定义组件中操作，将组件包“SelectWidget.zip”上传到组件库，场景选择“大屏&PC端”或“移动端”。
3. 测试组件。
   1. 在页面中，拖入该组件。
      图2 拖入组件
      
   2. 在组件上方单击，配置组件交互事件。
   3. 单击“交互事件”，选择“选中值发生变化时触发”事件，单击“响应动作”，选择“赋值全局变量”，在“赋值到变量”下拉框中单击“新建全局变量”，新建全局变量“status”，将事件的输出变量（如“selectValue”）赋值给页面级的全局变量“status”，单击“确定”后，单击“完成”。
      图3 设置交互事件