ant design vue pro 支持多页签模式问题
作者：Qshu
这篇文章主要介绍了ant design vue pro 支持多页签模式问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
ant design vue pro 支持多页签模式（tablayout ）
在最新的 ant design vue Pro 代码展示的功能中是使用的面包屑，省去了多页签模式，那么当面对一些场景需要使用多页签模式，我们该如何实现呢？
网络上目前没什么帖子，有些人建议参考jeecg。
经过不断的对比很久之前的版本与尝试，最终实现了该功能需求。
git拉取代码，启动项目
- 1、git clone https://github.com/sendya/ant-design-pro-vue.git
- 2、cd ant-design-pro-vue
- 3、yarn install
- 4、yarn run serve
启动后的页面是这个样子：
修改 src/layouts/BasicLayout.vue 文件，在该文件中添加multiTab代码块
<!-- layout content -->
<a-layout-content :style="{ height: '100%', margin: '0 0 40px 0', paddingTop: fixedHeader ? '64px' : '0' }">
<multi-tab v-if="multiTab"></multi-tab>
<transition name="page-transition">
</transition>
</a-layout-content>
并在页面定义 multiTab和fixedHeader 变量值，
具体代码如下：
<template>
<pro-layout
:title="title"
:menus="menus"
:collapsed="collapsed"
:mediaQuery="query"
:isMobile="isMobile"
:handleMediaQuery="handleMediaQuery"
:handleCollapse="handleCollapse"
:logo="logoRender"
:i18nRender="i18nRender"
v-bind="settings"
>
<!-- Ads begin
广告代码 真实项目中请移除
production remove this Ads
-->
<ads v-if="isProPreviewSite && !collapsed"/>
<!-- Ads end -->
<!-- layout content -->
<a-layout-content :style="{ height: '100%', margin: '0 0 40px 0', paddingTop: fixedHeader ? '64px' : '0' }">
<multi-tab v-if="multiTab"></multi-tab>
<transition name="page-transition">
</transition>
</a-layout-content>
<!-- 页面头-->
<template v-slot:rightContentRender>
<right-content :top-menu="settings.layout === 'topmenu'" :is-mobile="isMobile" :theme="settings.theme" />
</template>
<!-- 设置-->
<setting-drawer :settings="settings" @change="handleSettingChange" />
<!-- 页面内容-->
<router-view />
<!-- 页面脚-->
<template v-slot:footerRender>
<global-footer />
</template>
</pro-layout>
</template>
<script>
import MultiTab from '@/components/MultiTab'
import { SettingDrawer, updateTheme } from '@ant-design-vue/pro-layout'
import { i18nRender } from '@/locales'
import { mapState } from 'vuex'
import { SIDEBAR_TYPE, TOGGLE_MOBILE_TYPE } from '@/store/mutation-types'
import defaultSettings from '@/config/defaultSettings'
import RightContent from '@/components/GlobalHeader/RightContent'
import GlobalFooter from '@/components/GlobalFooter'
import Ads from '@/components/Other/CarbonAds'
import LogoSvg from '../assets/logo.svg?inline'
export default {
name: 'BasicLayout',
components: {
SettingDrawer,
RightContent,
GlobalFooter,
Ads,
MultiTab
},
data () {
return {
// preview.pro.antdv.com only use.
isProPreviewSite: process.env.VUE_APP_PREVIEW === 'true' && process.env.NODE_ENV !== 'development',
// end
multiTab: defaultSettings.multiTab,
fixedHeader: defaultSettings.fixedHeader, // sticky header
// base
menus: [],
// 侧栏收起状态
collapsed: false,
title: defaultSettings.title,
settings: {
// 布局类型
layout: defaultSettings.layout, // 'sidemenu', 'topmenu'
// 定宽: true / 流式: false
contentWidth: defaultSettings.layout === 'sidemenu' ? false : defaultSettings.contentWidth === 'Fixed',
// 主题 'dark' | 'light'
theme: defaultSettings.navTheme,
// 主色调
primaryColor: defaultSettings.primaryColor,
fixedHeader: defaultSettings.fixedHeader,
fixSiderbar: defaultSettings.fixSiderbar,
colorWeak: defaultSettings.colorWeak,
hideHintAlert: false,
hideCopyButton: false
},
// 媒体查询
query: {},
// 是否手机模式
isMobile: false
}
},
computed: {
...mapState({
// 动态主路由
mainMenu: state => state.permission.allQxRouterList
})
},
created () {
const routes = this.mainMenu.find(item => item.path === '/')
this.menus = (routes && routes.children) || []
// 处理侧栏收起状态
this.$watch('collapsed', () => {
this.$store.commit(SIDEBAR_TYPE, this.collapsed)
})
this.$watch('isMobile', () => {
this.$store.commit(TOGGLE_MOBILE_TYPE, this.isMobile)
})
},
mounted () {
const userAgent = navigator.userAgent
if (userAgent.indexOf('Edge') > -1) {
this.$nextTick(() => {
this.collapsed = !this.collapsed
setTimeout(() => {
this.collapsed = !this.collapsed
}, 16)
})
}
// first update color
updateTheme(this.settings.primaryColor)
},
methods: {
i18nRender,
handleMediaQuery (val) {
this.query = val
if (this.isMobile && !val['screen-xs']) {
this.isMobile = false
return
}
if (!this.isMobile && val['screen-xs']) {
this.isMobile = true
this.collapsed = false
this.settings.contentWidth = false
// this.settings.fixSiderbar = false
}
},
handleCollapse (val) {
this.collapsed = val
},
handleSettingChange ({ type, value }) {
showLog('type', type, value)
type && (this.settings[type] = value)
switch (type) {
case 'contentWidth':
this.settings[type] = value === 'Fixed'
break
case 'layout':
if (value === 'sidemenu') {
this.settings.contentWidth = false
} else {
this.settings.fixSiderbar = false
this.settings.contentWidth = true
}
break
}
},
logoRender () {
return <LogoSvg />
}
}
}
</script>
<style lang="less">
@import "./BasicLayout.less";
</style>
上面的代码引用了src-config-defaultSettings.js中的变量，若报错提示一些变量未定义，则去查看defaultSettings.js有没有做对应的配置，
贴出我的defaultSettings.js供参考：
/**
* 项目默认配置项
* primaryColor - 默认主题色, 如果修改颜色不生效，请清理 localStorage
* navTheme - sidebar theme ['dark', 'light'] 两种主题
* colorWeak - 色盲模式
* layout - 整体布局方式 ['sidemenu', 'topmenu'] 两种布局
* fixedHeader - 固定 Header : boolean
* fixSiderbar - 固定左侧菜单栏 ： boolean
* contentWidth - 内容区布局： 流式 | 固定
*
* storageOptions: {} - Vue-ls 插件配置项 (localStorage/sessionStorage)
*
*/
export default {
navTheme: 'dark', // theme for nav menu
primaryColor: '#13C2C2', // primary color of ant design
layout: 'sidemenu', // nav menu position: `sidemenu` or `topmenu`
contentWidth: 'Fluid', // layout of content: `Fluid` or `Fixed`, only works when layout is topmenu
fixedHeader: false, // sticky header
fixSiderbar: true, // sticky siderbar
autoHideHeader: true, // auto hide header
colorWeak: false,
multiTab: true,
menu: {
locale: true
},
title: 'Sugar',
pwa: false,
iconfontUrl: '',
production: process.env.NODE_ENV === 'production' && process.env.VUE_APP_PREVIEW !== 'true',
// 超级管理员信息，为该账户菜单默认权限全开
super_user_jo: {
user_id: '111',
username: 'super',
name: '超级管理员'
}
}
效果如下：
存在问题解决
之前操作步骤会存在返回原来的页签刷新页签的问题，通过评论区网友的建议，替换router.config.js中的RouterView能解决这个问题
代码如下：
import { UserLayout, BasicLayout, BlankLayout, PageView,RouteView } from '@/layouts'
import { bxAnaalyse } from '@/core/icons'
// const RouteView = {
// name: 'RouteView',
// render: (h) => h('router-vieRouteVieww')
// }
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。