@antdp/layout-tabs

用于主框架选项卡组件。解决 antd 组件 Tabs 切换性能慢的问题。

Tab 选项卡技术实现

测试项 | 页面切换重新渲染 | 页面切换 “隐藏” | iframe src 嵌入页面 | iframe 组件生成 ---- | ---- | ---- | ---- | ---- 性能 | ✅💯 | ⚠️(还需优化) | ✅💯 | ✅💯 页面状态 | ⚠️(有代码量) | ✅ | ✅ | ✅ 路由使用 | ✅ | ✅ | ❌(浏览器地址栏无变化) | ✅ antd 组件 | ✅ | ✅ | ✅ | ❌(大量弹出类组件位置错乱) 主框架交互 | ✅ | ✅ | ⚠️(局限以内，父页面交互复杂) | ✅ 样式加载 | ✅ | ✅ | ✅ | ⚠️(还需优化)

Installation

npm i @antdp/layout-tabs --save # yarn add @antdp/layout-tabs

基本使用

import React from 'react';
import LayoutTabs from '@antdp/layout-tabs';

const Demo = ()=>{
  return (
    <LayoutTabs
      // 菜单路由信息
      dataSource={[]}
    />
  )
}

export default Demo;

API

| 参数 | 说明 | 类型 | 默认值 | | -------- | -------- | -------- | -------- | | dataSource | 菜单路由数据 | LayoutTabsRouterProps[] | - | | bodyPadding | 内容边距 | string | number | - |

LayoutTabsRouterProps

| 参数 | 说明 | 类型 | 默认值 | | -------- | -------- | -------- | -------- | | icon | logo | string | - | | key | key健 | string | - | | name | 名称 | string | - | | path | 路径 | string | - | | exact | 是否匹配路由 | boolean | - | | location | 路由信息 | any | - | | match | 匹配信息 | any | - | | element | 渲染内容 | React.ReactNode | - |

通过配置 @antdp/config，来解决是否重新渲染或者 iframe 展示页面等功能