事件通信
要求
ONES |
---|
v3.7.1+ |
概述
事件系统是组件间通信的主要方式之一。自定义组件可以触发任意的事件,引用组件的页面也可以监听这些事件。我们提供了一套事件通信库,可以帮你在同一个插件内跨模块通信(通信的模块都需要处于挂载状态)。你也可以通过事件触发 ONES 的某些事件。
使用
第一步:安装依赖
进入 /web
目录,通过以下命令安装此包:
- npm
- Yarn
- pnpm
npm install @ones-op/event
yarn add @ones-op/event
pnpm add @ones-op/event
第二步:自定义监听器
添加自定义监听器,当指定事件类型被 dispatch
时,会执行监听回调。无法跨插件使用
import { OPPluginListener } from '@ones-op/event'
useEffect(() => {
const cancelFn = OPPluginListener('onChange', ({ value }) => {
return {
state: OPListenerProcessResultState.SUCCESS,
data: value + 1,
}
})
return () => cancelFn()
}, [])
警告
在组件销毁时 ,请保证调用取消监听函数,以避免占用内存,以及产生一些意料之外的 BUG。
第三步:派发事件
派发指定类型的事件,并返回 OPPluginListener
处理函数返回的 Promise 对象。无法跨插件使用
import { OPPluginDispatch } from '@ones-op/event'
OPPluginDispatch('onChange', { value: 0 }).then((result) => {
console.log(`listener processed value: ${result[0].data}`)
})
具体参数释义请参考:@ones-op/event
示例
示例一:激活全局进度管理器
第一步:添加一个插槽
以【我的工作台】-【概览】为例,执行以下指令选择 ones:workspace:overview
npx op add module
第二步:Dispatch 事件
index.tsx
import { ConfigProvider, Button } from '@ones-design/core'
import { OPDispatch } from '@ones-op/event'
import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
function App() {
const handleClick = () => {
OPDispatch('invoke:ones:global:progressManager')
}
return <Button onClick={handleClick}>激活进度管理器</Button>
}
ReactDOM.render(
<ConfigProvider>
<App />
</ConfigProvider>,
document.getElementById('ones-mf-root'),
)
第三步:在 ONES 触发
登录 ONES 系统,【我的工作台】-【概览】已被插件替换,点击按钮进度管理器被触发。如图:
示例二:触发成员列表刷新
要求
ONES |
---|
v3.11.15+ |
支持 ONES 中所有的成员列表
第一步:添加一个插槽
以【项目管理】-【成员】-【新增操作按钮】为例,执行以下指令选择ones:project:component:member:action:new
npx op add module
第二步:Dispatch 事件
index.tsx
import { ConfigProvider, Button } from '@ones-design/core'
import { OPDispatch } from '@ones-op/event'
import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
function App() {
const handleClick = () => {
OPDispatch('ones:event:memberList:refresh')
}
return <Button onClick={handleClick}>刷新成员列表</Button>
}
ReactDOM.render(
<ConfigProvider>
<App />
</ConfigProvider>,
document.getElementById('ones-mf-root'),
)
第三步:在 ONES 系统触发
登录 ONES,进入【项目管理】-【成员】顶栏操作区域,点击按钮刷新成员列表,发现成员列表数据已被更新。如图: