Ant design vue pro 添加多页签
1.修改模板/src/layouts/BasicLayout.vue添加如下代码第一处:<!-- layout content --><a-layout-content :style="{ height: '100%', margin: '0 0 40px 0', paddingTop: fixedHeader ? '64px' : '0' }"><multi-tab
·
1.修改模板
/src/layouts/BasicLayout.vue
添加如下代码
第一处:
<!-- 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: defaultSettings.multiTab,
fixedHeader: defaultSettings.fixedHeader,
完整代码
<template>
<pro-layout
:menus="menus"
:collapsed="collapsed"
:mediaQuery="query"
:isMobile="isMobile"
:handleMediaQuery="handleMediaQuery"
:handleCollapse="handleCollapse"
: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>
<!-- 1.0.0+ 版本 pro-layout 提供 API,
我们推荐使用这种方式进行 LOGO 和 title 自定义
-->
<template v-slot:menuHeaderRender>
<div>
<logo-svg />
<h1>{{ title }}</h1>
</div>
</template>
<!-- 1.0.0+ 版本 pro-layout 提供 API,
增加 Header 左侧内容区自定义
-->
<template v-slot:headerContentRender>
<div>
<a-tooltip title="刷新页面">
<a-icon type="reload" style="font-size: 18px;cursor: pointer;" @click="() => { $message.info('只是一个DEMO') }" />
</a-tooltip>
</div>
</template>
<setting-drawer v-if="isDev" :settings="settings" @change="handleSettingChange">
<div style="margin: 12px 0;">
This is SettingDrawer custom footer content.
</div>
</setting-drawer>
<template v-slot:rightContentRender>
<right-content :top-menu="settings.layout === 'topmenu'" :is-mobile="isMobile" :theme="settings.theme" />
</template>
<!-- custom footer / 自定义Footer -->
<template v-slot:footerRender>
<global-footer />
</template>
<router-view />
</pro-layout>
</template>
<script>
import { SettingDrawer, updateTheme } from '@ant-design-vue/pro-layout'
import { i18nRender } from '@/locales'
import { mapState } from 'vuex'
import { CONTENT_WIDTH_TYPE, 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,
LogoSvg,
Ads
},
data () {
return {
// preview.pro.antdv.com only use.
isProPreviewSite: process.env.VUE_APP_PREVIEW === 'true' && process.env.NODE_ENV !== 'development',
// end
isDev: process.env.NODE_ENV === 'development' || process.env.VUE_APP_PREVIEW === 'true',
// 多页标签
multiTab: defaultSettings.multiTab,
fixedHeader: defaultSettings.fixedHeader,
// base
menus: [],
// 侧栏收起状态
collapsed: false,
title: defaultSettings.title,
settings: {
// 布局类型
layout: defaultSettings.layout, // 'sidemenu', 'topmenu'
// CONTENT_WIDTH_TYPE
contentWidth: defaultSettings.layout === 'sidemenu' ? CONTENT_WIDTH_TYPE.Fluid : defaultSettings.contentWidth,
// 主题 '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.addRouters
})
},
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
// TIPS: THEME COLOR HANDLER!! PLEASE CHECK THAT!!
if (process.env.NODE_ENV !== 'production' || process.env.VUE_APP_PREVIEW === 'true') {
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 = CONTENT_WIDTH_TYPE.Fluid
// this.settings.fixSiderbar = false
}
},
handleCollapse (val) {
this.collapsed = val
},
handleSettingChange ({ type, value }) {
console.log('type', type, value)
type && (this.settings[type] = value)
switch (type) {
case 'contentWidth':
this.settings[type] = value
break
case 'layout':
if (value === 'sidemenu') {
this.settings.contentWidth = CONTENT_WIDTH_TYPE.Fluid
} else {
this.settings.fixSiderbar = false
this.settings.contentWidth = CONTENT_WIDTH_TYPE.Fixed
}
break
}
}
}
}
</script>
<style lang="less">
@import "./BasicLayout.less";
</style>
2.修改默认配置
/src/config/defaultSettings.js
添加如下代码
multiTab: true,
完整代码:
/**
* 项目默认配置项
* 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: '#1890ff', // '#F5222D', // 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: false, // sticky siderbar
colorWeak: false,
multiTab: true,
menu: {
locale: true
},
title: 'Ant Design Pro',
pwa: false,
iconfontUrl: '',
production: process.env.NODE_ENV === 'production' && process.env.VUE_APP_PREVIEW !== 'true'
}
3. 效果
更多推荐
已为社区贡献4条内容
所有评论(0)