1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
| <template>
| <el-container class="home-container">
| <app-aside :collapse="isCollapsed" @nav-page="navPage"></app-aside>
| <el-container>
| <el-header ref="headerRef" class="home-header">
| <app-header
| :navTitles="navTitles"
| :collapse="isCollapsed"
| @collapsed-sider="collapsedSider"
| ></app-header>
| </el-header>
| <el-main class="home-main">
| <el-scrollbar>
| <app-content></app-content>
| </el-scrollbar>
| </el-main>
| </el-container>
| </el-container>
| </template>
|
| <script>
| import { computed } from 'vue'
|
| export default {
| data() {
| return {
| isCollapsed: false,
| navTitles: [],
| headerHeight: 60,
| mainPadding: 10,
| contentMaxHeight: NaN,
| }
| },
| methods: {
| collapsedSider(b) {
| this.isCollapsed = b
| },
| navPage(titles) {
| this.navTitles = titles
| },
| },
| mounted() {
| this.headerHeight = this.$refs.headerRef.$el.offsetHeight
| this.contentMaxHeight = window.innerHeight - this.headerHeight - this.mainPadding
| },
| provide() {
| return {
| headerHeight: computed(() => this.headerHeight),
| mainPadding: computed(() => this.mainPadding),
| contentMaxHeight: computed(() => this.contentMaxHeight),
| }
| },
| }
| </script>
|
| <style scoped lang="scss">
| .home-container {
| height: 100vh;
| }
| .home-header {
| z-index: 1000;
| box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.12);
| }
| .home-main {
| padding-left: 0;
| padding-right: 0;
| padding-bottom: 0;
| padding-top: 10px;
| }
| .home-scrollbar {
| }
| .home-content {
| // padding-top: 20px;
| }
| </style>
|
|
