blackteay/fes.js
1
0
Fork 0
mirror of https://github.com/WeBankFinTech/fes.js.git synced 2025-04-06 03:59:53 +08:00
Code Issues Projects Releases Wiki Activity

fix: plugin-layout去掉使用<style vars>

Browse Source
This commit is contained in:
万纯 2021-01-18 15:41:32 +08:00
parent 8048b30036
commit 34927b0f51
1 changed files with 31 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -8,7 +8,7 @@
class="main-layout"
>
<template v-if="navigation !== 'top'">
<div v-if="fixedSideBar" class="layout-sider-fixed-stuff"></div>
<div v-if="fixedSideBar" :style="siderFixedStuffStyle" class="layout-sider-fixed-stuff"></div>
<a-layout-sider
v-model:collapsed="collapsed"
:width="sideWidth"
@ -30,6 +30,7 @@
<a-layout-header v-if="currentFixedHeader" class="layout-header">
</a-layout-header>
<a-layout-header
:style="headerFixedStyle"
:class="[currentFixedHeader ? 'layout-header-fixed' : '']"
class="layout-header"
>
@ -129,6 +130,7 @@ export default {
}
},
setup(props) {
const collapsed = ref(false);
const route = useRoute();
const routeHasLayout = computed(() => {
const _routeLayout = route.meta.layout;
@ -141,12 +143,39 @@ export default {
return props.theme;
});
const currentFixedHeader = computed(() => props.fixedHeader || props.navigation === 'mixin');
const siderFixedStuffStyle = computed(() => {
if (collapsed.value) {
return {
width: '80px'
};
}
return {
width: `${props.sideWidth}px`
};
});
const headerFixedStyle = computed(() => {
if (!currentFixedHeader.value) {
return {};
}
if (props.navigation === 'side') {
return {
left: `${props.sideWidth}px`,
width: `calc(100% - ${props.sideWidth}px)`
};
}
return {
left: 0,
width: '100%'
};
});
return {
siderTheme,
currentFixedHeader,
route,
routeHasLayout,
collapsed: ref(false)
collapsed,
siderFixedStuffStyle,
headerFixedStyle
};
}
};
@ -164,10 +193,6 @@ export default {
}
}
}
.layout-sider-fixed-stuff {
overflow: hidden;
width: 80px;
}
}
&.main-layout-navigation-top {
.layout-header {
@ -198,10 +223,6 @@ export default {
line-height: 32px;
}
}
&.layout-header-fixed {
left: 0;
width: 100%;
}
}
}
&.main-layout-navigation-mixin {
@ -240,15 +261,10 @@ export default {
line-height: 32px;
}
}
&.layout-header-fixed {
left: 0;
width: 100%;
}
}
}
.layout-sider-fixed-stuff {
overflow: hidden;
width: var(--sideWidth);
transition: width 0.2s;
flex-shrink: 0;
}
@ -299,10 +315,8 @@ export default {
&.layout-header-fixed {
position: fixed;
top: 0;
left: var(--sideWidth);
right: 0;
z-index: 10;
width: calc(100% - var(--sideWidth));
}
}
.layout-content {