ant?design?vue?pro?支持多頁(yè)簽?zāi)Ｊ絾栴}
更新時(shí)間：2023年11月17日 09:05:00 作者：Qshu
這篇文章主要介紹了ant?design?vue?pro?支持多頁(yè)簽?zāi)Ｊ絾栴},具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
ant design vue pro 支持多頁(yè)簽?zāi)Ｊ剑╰ablayout ）
在最新的 ant design vue Pro 代碼展示的功能中是使用的面包屑，省去了多頁(yè)簽?zāi)Ｊ?，那么?dāng)面對(duì)一些場(chǎng)景需要使用多頁(yè)簽?zāi)Ｊ?，我們?cè)撊绾螌?shí)現(xiàn)呢？
網(wǎng)絡(luò)上目前沒什么帖子，有些人建議參考jeecg。
經(jīng)過不斷的對(duì)比很久之前的版本與嘗試，最終實(shí)現(xiàn)了該功能需求。
git拉取代碼，啟動(dòng)項(xiàng)目
- 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
啟動(dòng)后的頁(yè)面是這個(gè)樣子：
修改 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>
并在頁(yè)面定義 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
廣告代碼 真實(shí)項(xiàng)目中請(qǐng)移除
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>
<!-- 頁(yè)面頭-->
<template v-slot:rightContentRender>
<right-content :top-menu="settings.layout === 'topmenu'" :is-mobile="isMobile" :theme="settings.theme" />
</template>
<!-- 設(shè)置-->
<setting-drawer :settings="settings" @change="handleSettingChange" />
<!-- 頁(yè)面內(nèi)容-->
<router-view />
<!-- 頁(yè)面腳-->
<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: [],
// 側(cè)欄收起狀態(tài)
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,
// 主色調(diào)
primaryColor: defaultSettings.primaryColor,
fixedHeader: defaultSettings.fixedHeader,
fixSiderbar: defaultSettings.fixSiderbar,
colorWeak: defaultSettings.colorWeak,
hideHintAlert: false,
hideCopyButton: false
},
// 媒體查詢
query: {},
// 是否手機(jī)模式
isMobile: false
}
},
computed: {
...mapState({
// 動(dòng)態(tài)主路由
mainMenu: state => state.permission.allQxRouterList
})
},
created () {
const routes = this.mainMenu.find(item => item.path === '/')
this.menus = (routes && routes.children) || []
// 處理側(cè)欄收起狀態(tài)
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中的變量，若報(bào)錯(cuò)提示一些變量未定義，則去查看defaultSettings.js有沒有做對(duì)應(yīng)的配置，
貼出我的defaultSettings.js供參考：
/**
* 項(xiàng)目默認(rèn)配置項(xiàng)
* primaryColor - 默認(rèn)主題色, 如果修改顏色不生效，請(qǐng)清理 localStorage
* navTheme - sidebar theme ['dark', 'light'] 兩種主題
* colorWeak - 色盲模式
* layout - 整體布局方式 ['sidemenu', 'topmenu'] 兩種布局
* fixedHeader - 固定 Header : boolean
* fixSiderbar - 固定左側(cè)菜單欄 ： boolean
* contentWidth - 內(nèi)容區(qū)布局： 流式 | 固定
*
* storageOptions: {} - Vue-ls 插件配置項(xiàng) (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',
// 超級(jí)管理員信息，為該賬戶菜單默認(rèn)權(quán)限全開
super_user_jo: {
user_id: '111',
username: 'super',
name: '超級(jí)管理員'
}
}
效果如下：
存在問題解決
之前操作步驟會(huì)存在返回原來的頁(yè)簽刷新頁(yè)簽的問題，通過評(píng)論區(qū)網(wǎng)友的建議，替換router.config.js中的RouterView能解決這個(gè)問題
代碼如下：
import { UserLayout, BasicLayout, BlankLayout, PageView,RouteView } from '@/layouts'
import { bxAnaalyse } from '@/core/icons'
// const RouteView = {
// name: 'RouteView',
// render: (h) => h('router-vieRouteVieww')
// }
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
本篇文章主要介紹了Vue 父子組件、組件間通信示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-03-03
使用vue-cli創(chuàng)建vue項(xiàng)目介紹
這篇文章介紹了使用vue-cli創(chuàng)建vue項(xiàng)目的方法，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-01-01
vue實(shí)現(xiàn)文字轉(zhuǎn)語(yǔ)音功能詳解
這篇文章主要介紹了vue實(shí)現(xiàn)文字轉(zhuǎn)語(yǔ)音功能詳解的相關(guān)資料,需要的朋友可以參考下2022-09-09
Vue.js第一天學(xué)習(xí)筆記（數(shù)據(jù)的雙向綁定、常用指令）
這篇文章主要為大家分享了Vue.js第一天的學(xué)習(xí)筆記，包括數(shù)據(jù)的雙向綁定、常用指令學(xué)習(xí),具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
vue如何實(shí)現(xiàn)清空this.$route.query的值
這篇文章主要介紹了vue如何實(shí)現(xiàn)清空this.$route.query的值，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
在 setup 語(yǔ)法糖中通過 import 引入的內(nèi)容，也可以直接在 template 標(biāo)簽中使用，這篇文章主要介紹了Vue?使用?setup?語(yǔ)法糖,需要的朋友可以參考下2023-10-10
這篇文章主要介紹了Vue分頁(yè)效果與購(gòu)物車功能,本文圖文實(shí)例相結(jié)合給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-12-12
vue使用vuex實(shí)現(xiàn)首頁(yè)導(dǎo)航切換不同路由的方法
這篇文章主要介紹了vue使用vuex實(shí)現(xiàn)首頁(yè)導(dǎo)航切換不同路由的方法 ,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-05-05
這篇文章主要介紹了web項(xiàng)目開發(fā)中VUE的混入與繼承原理，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2021-09-09
這篇文章主要介紹了Vue中的baseurl如何配置問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04