test/fes.js
1
0
Fork 0
mirror of https://gitee.com/WeBank/fes.js.git synced 2024-12-02 19:58:18 +08:00
Code Issues Actions 6 Packages Projects Releases Wiki Activity

fix(plugin-layout): layout的aside宽度未跟随配置改变

Browse Source
This commit is contained in:
wanchun 2022-01-07 17:35:17 +08:00
parent 7d4ffdc93a
commit 65de66c5d8
1 changed files with 20 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
packages/fes-plugin-layout/src/runtime/views/BaseLayout.vue
View File

@ -5,6 +5,7 @@
v-if="routeLayout.sidebar" v-if="routeLayout.sidebar"
v-model:collapsed="collapsed" v-model:collapsed="collapsed"
:fixed="fixedSideBar" :fixed="fixedSideBar"
:width="`${sideWidth}px`"
class="layout-aside" class="layout-aside"
collapsible collapsible
:inverted="theme === 'dark'" :inverted="theme === 'dark'"
@ -33,6 +34,7 @@
> >
<f-header <f-header
v-if="routeLayout.header" v-if="routeLayout.header"
ref="headerRef"
class="layout-header" class="layout-header"
:fixed="currentFixedHeader" :fixed="currentFixedHeader"
> >
@ -46,7 +48,7 @@
<f-layout <f-layout
:embedded="!multiTabs" :embedded="!multiTabs"
:fixed="currentFixedHeader" :fixed="currentFixedHeader"
:style="{ top: currentFixedHeader ? '54px' : 'auto' }" :style="{ top: currentFixedHeader ? `${headerHeightRef}px` : 'auto' }"
> >
<f-main class="layout-main"> <f-main class="layout-main">
<MultiTabProvider :multiTabs="multiTabs" /> <MultiTabProvider :multiTabs="multiTabs" />
@ -60,6 +62,7 @@
<template v-if="navigation === 'top'"> <template v-if="navigation === 'top'">
<f-header <f-header
v-if="routeLayout.header" v-if="routeLayout.header"
ref="headerRef"
class="layout-header" class="layout-header"
:inverted="theme === 'dark'" :inverted="theme === 'dark'"
:fixed="currentFixedHeader" :fixed="currentFixedHeader"
@ -84,7 +87,7 @@
<f-layout <f-layout
:embedded="!multiTabs" :embedded="!multiTabs"
:fixed="currentFixedHeader" :fixed="currentFixedHeader"
:style="{ top: currentFixedHeader ? '54px' : 'auto' }" :style="{ top: currentFixedHeader ? `${headerHeightRef}px` : 'auto' }"
> >
<f-main class="layout-main"> <f-main class="layout-main">
<MultiTabProvider :multiTabs="multiTabs" /> <MultiTabProvider :multiTabs="multiTabs" />
@ -97,6 +100,7 @@
<template v-if="navigation === 'mixin'"> <template v-if="navigation === 'mixin'">
<f-header <f-header
v-if="routeLayout.header" v-if="routeLayout.header"
ref="headerRef"
class="layout-header" class="layout-header"
:fixed="currentFixedHeader" :fixed="currentFixedHeader"
:inverted="theme === 'dark'" :inverted="theme === 'dark'"
@ -114,12 +118,13 @@
</f-header> </f-header>
<f-layout <f-layout
:fixed="currentFixedHeader" :fixed="currentFixedHeader"
:style="{ top: currentFixedHeader ? '54px' : 'auto' }" :style="{ top: currentFixedHeader ? `${headerHeightRef}px` : 'auto' }"
> >
<f-aside <f-aside
v-if="routeLayout.sidebar" v-if="routeLayout.sidebar"
v-model:collapsed="collapsed" v-model:collapsed="collapsed"
:fixed="fixedSideBar" :fixed="fixedSideBar"
:width="`${sideWidth}px`"
collapsible collapsible
class="layout-aside" class="layout-aside"
> >
@ -155,7 +160,7 @@
</template> </template>
<script> <script>
import { ref, computed } from 'vue'; import { ref, computed, onMounted } from 'vue';
import { useRoute, plugin, ApplyPluginsType } from '@@/core/coreExports'; import { useRoute, plugin, ApplyPluginsType } from '@@/core/coreExports';
import { import {
FLayout, FAside, FMain, FFooter, FHeader FLayout, FAside, FMain, FFooter, FHeader
@ -220,6 +225,15 @@ export default {
footer: String footer: String
}, },
setup(props) { setup(props) {
const headerRef = ref();
const headerHeightRef = ref(0);
onMounted(() => {
if (headerRef.value) {
headerHeightRef.value = headerRef.value.$el.offsetHeight;
}
});
const collapsed = ref(false); const collapsed = ref(false);
const route = useRoute(); const route = useRoute();
const runtimeConfig = plugin.applyPlugins({ const runtimeConfig = plugin.applyPlugins({
@ -261,6 +275,8 @@ export default {
() => props.fixedHeader || props.navigation === 'mixin' () => props.fixedHeader || props.navigation === 'mixin'
); );
return { return {
headerRef,
headerHeightRef,
route, route,
routeLayout, routeLayout,
collapsed, collapsed,