EventEmitter

事件总线，主要用于主框架和组件通信，也可用于其他需要跨页面通信的场景。

使用

import { eventEmitter } from '@et-modules/common'

API

| 参数 | 说明 | 类型 | | - | - | - | | on | 添加事件监听 | function(type: EventType, callback) | | off | 移除事件监听 | function(type: EventType, callback) | | once | 只监听一次 | function(type: EventType, callback) | | emit | 触发一个事件并传递数据 | function(type: EventType, ..args) |

EventType 说明

在模块内设置了用于主框架和组件通信的事件类型: EventType , 后续开发中可继续增加类型

当使用 emit 函数触发事件时，传递参数说明如下：

| 类型 | 参数 | 说明 | | - | - | - | | FRAME_REFRESH | {module: Module} | 通知主框架刷新 | | VIEW_REFRESH | {module: Module} | 通知组件刷新 | | OPEN_TAB | {id: string, name: string, module: Module} | 在主框架打开一个tab页签 | | LOGOUT | 无 | 通知主框架退出 |

示例

import { eventEmitter, EventType,  Module} from '@et-modules/common'

const refreshEvent = (data) => {
  if(data?.module === Module.PRODUCT) {
    console.log('主框架刷新产品数据')
  }
}
eventEmitter.emit(EventType.FRAME_REFRESH, {module: Module.PRODUCT})
eventEmitter.on(EventType.FRAME_REFRESH, refreshEvent)
eventEmitter.off(EventType.FRAME_REFRESH, refreshEvent)

和主框架通信

• 主框架

import React from 'react';
import { ProductView } from '@et-modules/product';
import { eventEmitter, EventType } from '@et-modules/common';

const Product = ({ resource }) => {

  useEffect(() => {
    const handleRefresh = (data) => {
      if(data?.module === Module.PRODUCT) {
      // 接收到需要主框架刷新的事件，刷新主框架数据
      }
    }
    eventEmitter.on(EventType.FRAME_REFRESH, handleRefresh);

    return () => {
      eventEmitter.off(EventType.FRAME_REFRESH, handleRefresh);
    };
  }, []);

  return <ProductView  />;
};

export default Product;

• 组件内

import React, { FC } from 'react';
import { eventEmitter, EventType } from '@et-modules/common';


const ProductView: FC<ProductViewProps> = ({ eventEmitter }) => {
  const handleDelete = () => {
    // 删除成功后
    eventEmitter.emit(EventType.FRAME_REFRESH,  { module: Module.PRODUCT })
  }

  useEffect(() => {
    const handleRefresh = () => {
      if(data?.module === Module.PRODUCT) {
      // 接收到主框架传递的数据，刷新组件内的数据
      }
    };
    eventEmitter.on(EventType.VIEW_REFRESH, handleRefresh);
    return () => {
      eventEmitter.off(EventType.FRAME_REFRESH, handleRefresh);
    };
  }, []);

  return <div>xxxx</div>
}

style 公共样式

为了统一样式，且每个模块都能共用，将样式变量定义文件移入到 @et-modules/common 模块中。

尽量使用 variable.less 中的变量去处理样式，如果有需要统一的样式均添加到 variable.less 中。

使用

@import '@et-modules/common/lib/style/variable.less';

.app {
  background-color: @hover-bg-color;
}

Icon 图标

使用

import { Icon } from '@et-modules/common';

const App = () => {
  return (
    <Icon type='icon-xxx' />
  )
}