跳至主要內容

多标签页 (Multi Tabs)

Mr.Hope大约 4 分钟

多标签页 (Multi Tabs)

多标签页功能允许用户在不同的页面间进行快速切换。默认使用 MultiTabsWidget 作为该功能的基类。

参数

  • router: 非响应式变量，表示应用的路由对象。
  • matched: 非响应式变量，表示当前路由匹配的信息。
  • homepageTab: 响应式变量，表示首页的标签页信息。
  • tabs: 响应式变量，表示当前的标签页列表，默认为空数组。
  • activeKey: 响应式变量，表示当前激活的标签页的键值。
  • invisible: 响应式变量，表示当前标签页是否不可见，默认为 false。
  • inline: 响应式变量，表示当前 multiTabs是否 inline展示。
  • showModuleLogo: 响应式变量，表示标签页是否展示模块 logo。
  • draggable: 响应式变量，表示标签页是否可拖拽。
  • homepageType: 响应式变量，表示标签页首页类型。

方法

closable()

  • 类型: 响应式方法
  • 描述: 判断每个标签页是否可关闭。
  • 入参:
    • tabs (MultiTabItem[]): 当前标签页列表。
    • tab (MultiTabItem): 当前标签页。
    • index (number): 当前标签页的索引。
  • 返回值:
    • boolean: 当前标签页是否可关闭。
@Widget.Method()
protected closable(tabs: MultiTabItem[], tab: MultiTabItem, index: number): boolean {}

onClickTab()

  • 类型: 响应式方法
  • 描述: 点击标签页时调用，切换激活的标签页。
  • 入参:
    • tab (MultiTabItem): 当前点击的标签页。
@Widget.Method()
protected onClickTab(tab: MultiTabItem) {}

onRefreshTab()

  • 类型: 响应式方法
  • 描述: 刷新标签页内容。
  • 入参:
    • tab (MultiTabItem): 当前需要刷新的标签页。
@Widget.Method()
protected onRefreshTab(tab: MultiTabItem) {}

onCloseTab()

  • 类型: 响应式方法
  • 描述: 关闭标签页，自动更新当前需展示的标签页。
  • 入参:
    • tab (MultiTabItem): 当前需要关闭的标签页。
@Widget.Method()
protected onCloseTab(tab: MultiTabItem) {}

onCloseOtherTabs()

  • 类型: 响应式方法
  • 描述: 关闭除当前标签页外的其他标签页。
  • 入参:
    • tab (MultiTabItem): 当前标签页。
@Widget.Method()
protected onCloseOtherTabs(tab: MultiTabItem) {}

onCloseLeftTabs()

  • 类型: 响应式方法
  • 描述: 关闭当前标签页左侧的其他标签页。
  • 入参:
    • tab (MultiTabItem): 当前标签页。
@Widget.Method()
protected onCloseLeftTabs(tab: MultiTabItem) {}

onCloseRightTabs()

  • 类型: 响应式方法
  • 描述: 关闭当前标签页右侧的其他标签页。
  • 入参:
    • tab (MultiTabItem): 当前标签页。
@Widget.Method()
protected onCloseRightTabs(tab: MultiTabItem) {}

generatorCloseIgnoredKeys()

  • 类型: 非响应式方法
  • 描述: 拿到当前标签页 key 和 homepage 页 key，忽略关闭。
  • 入参:
    • tab (MultiTabItem): 当前标签页。
protected generatorCloseIgnoredKeys(tab: MultiTabItem) {}

$onCloseOtherTabs()

  • 类型: 非响应式方法
  • 描述: 关闭其他标签页。
  • 入参:
    • tab (MultiTabItem): 当前标签页。
    • currentActiveIndex (number): 当前标签页索引。
    • filter ((tab: MultiTabItem, index: number) => boolean): 过滤函数，满足条件的标签页才会被关闭。
protected $onCloseOtherTabs(tab: MultiTabItem, currentActiveIndex: number, filter: (tab: MultiTabItem, index: number) => boolean) {}

findNextActiveTab()

  • 类型: 非响应式方法
  • 描述: 根据当前标签页索引，返回关闭后下一个应当激活的标签页。默认激活索引更小的，索引为 0 激活索引更大的。
  • 入参:
    • tabs (MultiTabItem[]): 当前标签页列表。
    • currentActiveIndex (number): 当前标签页索引。
  • 返回值:
    • MultiTabItem: 关闭当前标签页后下一个应当激活的标签页。
protected findNextActiveTab(tabs: MultiTabItem[], currentActiveIndex: number) {}

onOpenNewWindow()

  • 类型: 响应式方法
  • 描述: 在新窗口中打开标签页。
  • 入参:
    • tab (MultiTabItem): 当前标签页。
@Widget.Method()
protected onOpenNewWindow(tab: MultiTabItem) {}

onMoveToSelfCallback()

  • 类型: 响应式方法
  • 描述: 拖拽标签页的回调。
  • 入参:
    • dragTab (MultiTabItem): 拖拽的标签页。
    • targetTab (MultiTabItem): 目标标签页。
  • 返回值:
    • boolean: 是否允许拖拽到目标标签页。
@Widget.Method()
protected onMoveToSelfCallback(dragTab: MultiTabItem, targetTab: MultiTabItem): boolean {}

onMovedCallback()

  • 类型: 响应式方法
  • 描述: 拖拽标签页完成后的回调。
  • 入参:
    • tab (MultiTabItem): 拖拽的标签页。
@Widget.Method()
protected onMovedCallback(tab: MultiTabItem) {}

consumerTargetTab()

  • 类型: 非响应式方法
  • 描述: 对目标标签页执行相应回调。
  • 入参:
    • tab (MultiTabItem): 目标标签页。
    • fn (activeIndex: number, targetIndex: number) => void): 对当前激活的标签页和目标标签页的回调。
@Widget.Method()
protected consumerTargetTab(tab: MultiTabItem, fn: (activeIndex: number, targetIndex: number) => void) {}

reloadTabs()

  • 类型: 非响应式方法
  • 描述: 重新加载标签页信息。
protected async reloadTabs(): Promise<void> {}

generatorTabTitle()

  • 类型: 非响应式方法
  • 描述: 生成标签页标题。
  • 入参:
    • tab (MultiTabInstance): 目标标签页。
  • 返回值:
    • string: 标签页标题。
protected async generatorTabTitle(tab: MultiTabInstance): string {}

reloadActiveTab()

  • 类型: 非响应式方法
  • 描述: 重新加载当前激活的标签页信息。
protected async reloadActiveTab(): Promise<void> {}

reloadMainViewProcess()

  • 类型: 非响应式方法
  • 描述: 重新加载主视图信息。
  • 入参:
    • reloadParameters (ReloadMainViewCallChainingParameters): 重新加载主视图的参数。
protected async reloadMainViewProcess(reloadParameters: ReloadMainViewCallChainingParameters) {}

onActive

  • 类型: 非响应式方法
  • 描述: 标签页激活时触发的事件，更新activeKey。
  • 参数:
    • manager (IMultiTabsManager): 多标签页管理器实例。
    • instance (MultiTabInstance): 激活的标签页实例。

onClose

  • 类型: 非响应式方法
  • 描述: 标签页关闭时触发的事件，调用onCloseTab(targetTab)关闭标签页。
  • 参数:
    • manager (IMultiTabsManager): 多标签页管理器实例。
    • instance (MultiTabInstance): 关闭的标签页实例。

$$mounted()

  • 类型: 非响应式方法
  • 描述: 组件挂载时执行，初始化多个值，包括：
    • router (应用路由对象)
    • matched (当前路由匹配信息)
    • 注册 onActive 和 onClose 事件。
protected async $$mounted() {}

$$unmounted()

  • 类型: 非响应式方法
  • 描述: 组件卸载时执行，清除 onActive 和 onClose 事件的注册。
protected async $$unmounted() {}

如何替换

import { MultiTabsWidget, SPI, MaskWidget } from "@kunlun/dependencies";

@SPI.ClassFactory(MaskWidget.Token({ dslNodeType: "multi-tabs" }))
export class CustomMultiTabs extends MultiTabsWidget {}
默认页脚
Copyright © 2024 Mr.Hope