组件自定义事件实现

注册自定义事件

自定义事件在{widget}.editor.js文件中的eventConfig配置项中注册，以global_SelectWidget组件为例：

• 在文件global_SelectWidget.editor.js中定义事件

  eventConfig: {
      sendSelect: {
        desc: { zh_CN: "当选中选项时", en_US: "Select Choose" },
        fields: [
          {
            name: "selectValue",
            desc: { zh_CN: "选项值", en_US: "Select Choose" },
          },
        ],
      },
    },

• 在文件global_SelectWidget.js的init钩子中注册事件

  * @params thisObj: 组件实例，等同于this
  * @params "sendSelect": 事件key值
  * @params { "zh_CN": "当选中选项时", "en_US": "Select Choose" }: 事件描述，国际化
  * @params []: 空数组，固定写法 （内部组件暂时没有用到过）
  */
  Studio.registerEvents(thisObj, "sendSelect", { "zh_CN": "当选中选项时", "en_US": "Select Choose" }, []);

图1 配置后效果

触发自定义事件

• 在文件global_SelectWidget.ftl文件中，监听el-select的change事件

  <el-select v-model="selectConfObj.selectValue" :disabled="selectConfObj.disabled" :popper-append-to-body="false"
             @change="search"
             clearable
             :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>

• 在文件global_SelectWidget.js中，触发自定义事件

  search: function () {
      // 拼装事件参数
      const params = {
          selectValue: this.selectConfObj.selectValue
      };
      // 触发自定义事件
      thisObj.triggerEvent("sendSelect", params);
  },

全局变量

组件触发自定义事件时，可以给全局变量赋值，fields数组中每一个对象保存着暴露给全局变量的详细配置。

图2 给全局变量赋值

暴露给全局变量的字段，一定要在触发事件参数中定义，如图3。

图3 定义字段