Ant Design pro路由菜单标签页插件使用

安装命令

npm i umi-plugin-panel-tabs

在config/config.js文件下的definConfig方法中进行配置:

export default defineConfig({
  panelTab: {
    use404: true,
    useAuth: true,
    autoI18n: true,
    tabsLimit: 10,
    tabsLimitWait: 500,
    tabsLimitWarnTitle: '提示',
    tabsLimitWarnContent: '您当前打开页面过多, 请关闭不使用的页面以减少卡顿!',
    tabsBarBackgroundColor: '#FFFFFF',
    tabsTagColor: '#1890ff',
  },
});

在该路由中配置属性hideInPanelTab, 将其设置为true, 此路由就不会在标签页中显示

配置后标签栏位置出现了偏移?

在 app.jsx 的 layout 方法中添加 disableContentMargin: true 配置

或者

在global全局css中加入以下代码:

.ant-layout-content{
margin-top:0;
position: relative;
>div:first-child{
position:absolute;
left:0;
width:100%;
margin-left:208px;
height:50px;
}
}