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 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',// endisDev: process.env.NODE_ENV === 'development' || process.env.VUE_APP_PREVIEW === 'true',// 多页标签multiTab: defaultSettings.multiTab,fixedHeader: defaultSettings.fixedHeader,// basemenus: [],// 侧栏收起状态collapsed: false,title: defaultSettings.title,settings: {// 布局类型layout: defaultSettings.layout, // 'sidemenu', 'topmenu'// CONTENT_WIDTH_TYPEcontentWidth: 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.userAgentif (userAgent.indexOf('Edge') > -1) {this.$nextTick(() => {this.collapsed = !this.collapsedsetTimeout(() => {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 = valif (this.isMobile && !val['screen-xs']) {this.isMobile = falsereturn}if (!this.isMobile && val['screen-xs']) {this.isMobile = truethis.collapsed = falsethis.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] = valuebreakcase 'layout':if (value === 'sidemenu') {this.settings.contentWidth = CONTENT_WIDTH_TYPE.Fluid} else {this.settings.fixSiderbar = falsethis.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 menuprimaryColor: '#1890ff', // '#F5222D', // primary color of ant designlayout: 'sidemenu', // nav menu position: `sidemenu` or `topmenu`contentWidth: 'Fluid', // layout of content: `Fluid` or `Fixed`, only works when layout is topmenufixedHeader: false, // sticky headerfixSiderbar: false, // sticky siderbarcolorWeak: 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. 效果

Ant design vue pro 添加多页签相关推荐

ant design vue pro 支持多页签模式页签可以缓存
ant design vue pro 支持多页签模式页签可以缓存代码贴在最后启动之后页面是这样的: 第一步:修改 src/layouts/BasicLayout.vue 文件,在该文件中添加mu ...
vue将每个路由打包成html,Ant Design Vue pro 动态路由的实现和打包
Ant Design Vue pro 动态路由的实现和打包 Ant Design Vue pro 动态路由的实现和打包配置路由权限在config文件夹下router.config.js中配置路由权 ...
Ant Design Vue Pro（V3.0.0 ）MultiTab标签缓存，完美解决
使用Ant Design Vue Pro 基础框架都知道好用,但是MultiTab标签一直未解决(V3.0.0),最新版解决了但是要收费9K(2022-01-21日). 首先需要实现如下: Multi ...
Ant Design Vue中tabs标签页切换导致页面变宽的问题
问题在使用Ant Design Vue进行开发的时候,使用了tabs标签页,在页里面套用了表格,但是在页面切换后,会发现页面的width会变大差不多2倍,这样会导致页面一些结构的样式发生变化. 解决 ...
Ant Design Vue 表格筛选时只进行前台的按页筛选修改为后台的全局筛选
原因分析在我们使用 Ant Design Vue 表格筛选功能时会发现,如果只是按照例子来,只是前端的按页筛选,并不能都进行全局筛选,原因有两点: 1.我们筛选的时候,只是进行前端的数据过滤,并没有 ...
ABP vNext 对接 Ant Design Vue 实现分页查询
本文内容 ABP vNext中的分页查询 STable组件中的分页查询实现参数转换层最终对接效果在上一篇博客中,博主和大家分享了如何在 EF Core 中实现多租户架构.在这一过程中,博主主 ...
chrome插件开发（manifest_version版本V3 + Ant Design Vue）
1.什么是 Chrome 插件谷歌浏览器插件是一种小型的定制浏览器体验的程序,通过插件可以自定义浏览器的一些行为来适合个人的需求,例如上面的查看服务器状态插件. 在应用商店中下载下来的插件基本上都是 ...
Ant design vue动态主题切换的坑与一般性方法
本文原创,并且以吐槽为主,下面开始: Ant design vue是很优秀的框架,不过对于一般小白用户(比如我),文档方面不够友好.官方给出了主题自定义色彩的方案,但是太过于简陋,网上很多技术解决方案 ...
iviewui php,Vue UI框架对比：Element UI、Ant Design Vue、iView
Element UI 文档:https://element.eleme.io/#/zh-CN/component/installation vue-element-admin预览:https://pa ...

Ant design vue pro 添加多页签

1.修改模板

2.修改默认配置

3. 效果

Ant design vue pro 添加多页签相关推荐

最新文章

热门文章