组件自定义事件实现

注册自定义事件

自定义事件在{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"
        :multiple="selectConfObj.multiple"
        :clearable="!selectConfObj.multiple"
        collapse-tags
        @visible-change="visibleChange"
        :filterable="selectConfObj.multiple? false: selectConfObj.searchDisabled"
        :filter-method="match"
        :placeholder="selectConfObj.placeholder"
        popper-class="selectWidget"
      >
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" :title="item.label">
        </el-option>
   </el-select>

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

  search: function () {
  var params = {
     ...WidgetTools.dataTrans.getDataByKeyAndVal(
        this.selectConfObj.options,
        'value',
        this.selectConfObj.selectValue,
        ['label', 'value'],
      ),
      selectValue: this.selectConfObj.multiple
         ? JSON.stringify(this.selectConfObj.selectValue).slice(1, -1)
         : this.selectConfObj.selectValue,
          };
   thisObj.triggerEvent('sendSelect', params);
   },

全局变量

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

图2 给全局变量赋值

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

图3 定义字段