优化,设置AppMain滚动高度,使得头部固定

This commit is contained in:
wangnan 2019-06-17 12:11:53 +08:00
parent d3a2b6b34e
commit 66d7009343
1 changed files with 12 additions and 2 deletions

View File

@ -1,5 +1,5 @@
<template> <template>
<section class="app-main"> <section class="app-main" :style="{height: mianHeight+'px'}">
<transition name="fade-transform" mode="out-in"> <transition name="fade-transform" mode="out-in">
<keep-alive :include="cachedViews"> <keep-alive :include="cachedViews">
<router-view :key="key" /> <router-view :key="key" />
@ -11,6 +11,11 @@
<script> <script>
export default { export default {
name: 'AppMain', name: 'AppMain',
data() {
return {
mianHeight: 0
}
},
computed: { computed: {
cachedViews() { cachedViews() {
return this.$store.state.tagsView.cachedViews return this.$store.state.tagsView.cachedViews
@ -18,6 +23,11 @@ export default {
key() { key() {
return this.$route.path return this.$route.path
} }
},
created() {
window.addEventListener('resize', () => {
this.mianHeight = document.documentElement.clientHeight - 34 - 50
})
} }
} }
</script> </script>
@ -28,7 +38,7 @@ export default {
min-height: calc(100vh - 50px); min-height: calc(100vh - 50px);
width: 100%; width: 100%;
position: relative; position: relative;
overflow: hidden; overflow: auto;
} }
.fixed-header+.app-main { .fixed-header+.app-main {