menuTab 方法
在使用 menuTab 方法之前需引入相应的方法。
import { ... } from 'utils/menuTab';
onBeforeMenuTabRemove
- 添加某个tab的 onBefore 事件
- 同一个tab关闭前事件只能有一个回调
参数
[tabKey](String):tabKey
[onBeforeHandler](() => boolean | Promise):返回值为 false 或 Promise.reject 将阻止tab页关闭
示例
onBeforeMenuTabRemove('/test', () => {
return new Promise((resolve, reject) => {
const { flag } = this.state;
if (flag) {
Modal.confirm({
title: intl
.get('hzero.common.message.confirm.giveUpTip')
.d('你有修改未保存,是否确认离开?'),
onOk: () => {
resolve();
},
onCancel: () => {
reject();
},
});
} else {
resolve();
}
});
});
getBeforeMenuTabRemove
- 获取某个tab的 onBefore 事件
参数
[tabKey](String):tabKey
返回
(Function|Any) :设置的回调函数或者设置的其他类型的字段
示例
const onBeforeHandler = getBeforeMenuTabRemove('/test');
// => undefined
deleteBeforeMenuTabRemove
- 移除某个tab的 onBefore 事件
参数
[tabKey](String):tabKey
示例
deleteBeforeMenuTabRemove('/test');
openTab
- 入口, 切换或者新建 tab
参数
[newTab](Object):tabKey
示例
openTab({
key: `/test`, // 打开 tab 的 key
path: `/test/list`, // 打开页面的path
title: 'hzero.common.title.test', // tab的标题
search: queryString.stringify({
action: 'test',
}), // history 的 search 值
icon: null, // 图标的值,antd 的 Icon
closable: true, // tab 是否可以关闭
type: 'menu', // tab 类型
});
closeTab
- 关闭 tab
参数
[key](String):tab 的key
示例
closeTab('/test');
updateTab
- 更新对应key的tab
参数
[tab](Object):tab
示例
updateTab({
closable: true,
icon: "home",
key: "/test",
path: "/test",
search: undefined,
title: "hzero.common.title.test",
type: "menu",
});
tabListen
- 对tab进行切换,或者替换操作
参数
[pathname](String=''):URL的路径部分
示例
tabListen('/test/detail');
cleanMenuTabs
- 清空 menuTabs 的缓存
- 要注意调用顺序, 先清除 sessionStorage 里面的数据, 再清空 redux 里面的数据
示例
cleanMenuTabs();
persistMenuTabs
- 存储 tab 信息
示例
persistMenuTabs();
getActiveTabKey
- 获取当前激活的 tab Key
返回
(String):当前激活的tabKey
示例
const activeTabKey = getActiveTabKey();
// => '/test/list'
getInitialActiveTabKey
- 获取初始化的 tab Key
返回
(String):初始化的tabKey
示例
const activeTabKey = getInitialActiveTabKey();
// => '/workplace'
getInitialTabData
- 获取初始化的tab
返回
(Object):初始化的tab
示例
const activeTab = getInitialTabData();
// => [{
// title: "hzero.common.title.workspace",
// icon: "home",
// closable: false,
// key: "/workplace",
// path: "/workplace"
// }]
getTabFromKey
- 通过 key 获取tab
参数
[key](String): tab 的 key
返回
(Object):找到的tab
示例
const tab = getTabFromKey('/test');