vue页面经典布局

一、 上中下

<template>
    <div class="layout" id="layout" ref="layout" :style="`width:${width}px;height:${height}px`">
        <div class="layout-header" :style="`width:${width}px;height:${headerHeight}px`"></div>
        <div class="layout-main" :style="`width:${width}px;height:${mainHeight}px`">
            <div class="layout-main-content">
                <div v-for="i in 100" :key="i">{{i}}</div>
            </div>
        </div>
        <div class="layout-footer" :style="`width:${width}px;height:${footerHeight}px`"></div>
    </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
@Component({
    components: {}
})
export default class Layout extends Vue {
    height = 0

    width = 0

    headerHeight = 60

    mainHeight = 0

    footerHeight = 10

    mounted() {
        this.$nextTick(() => {
            this.width = window.innerWidth
            this.height = window.innerHeight
            this.mainHeight =
                this.height - this.headerHeight - this.footerHeight
        })

        window.onresize = () => {
            return (() => {
                this.width = window.innerWidth
                this.height = window.innerHeight
                this.mainHeight =
                    this.height - this.headerHeight - this.footerHeight
            })()
        }
    }
}
</script>

<style lang="scss" scoped>
.layout {
    background: darkcyan;

    .layout-header {
        background: darkgoldenrod;
    }

    .layout-main {
        background: darkorchid;

        overflow-y: auto;
        white-space: nowrap;

        .layout-main-content {
            width: 100%;
            white-space: nowrap;
            // justify-content: flex-start;
            // display: flex;
            // align-items: center;
        }
    }

    .layout-footer {
        background: darkseagreen;
    }
}
</style>

1. 可以直接设置header的高度
2. 可以直接设置footer的高度
3. main里面的内容写到content里面，进行滚动条滚动

二、 左 右（上中下）

<template>
    <div class="layout" id="layout" ref="layout" :style="`width:${width}px;height:${height}px`">
        <div class="layout-left" :style="`width:${leftWidth}px;height:${height}px`">
            <div class="layout-left-logo" :style="`width:${leftWidth}px;height:${headerHeight}px`"></div>
            <div class="layout-left-menu" :style="`width:${leftWidth}px;height:${mainHeight+footerHeight}px`"></div>
        </div>

        <div class="layout-right" :style="`width:${rightWidth}px;height:${height}px`">
            <div class="layout-header" :style="`width:${rightWidth}px;height:${headerHeight}px`"></div>
            <div class="layout-main" :style="`width:${rightWidth}px;height:${mainHeight}px`">
                <div class="layout-main-content">
                    <div v-for="i in 100" :key="i">{{i}}</div>
                </div>
            </div>
            <div class="layout-footer" :style="`width:${rightWidth}px;height:${footerHeight}px`"></div>
        </div>

    </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'

@Component({
    components: { }
})
export default class Layout extends Vue {
    height = 0

    width = 0

    leftWidth = 100

    rightWidth = 0

    headerHeight = 100

    mainHeight = 0

    footerHeight = 0

    mounted() {
        this.$nextTick(() => {
            this.width = window.innerWidth
            this.height = window.innerHeight
            this.mainHeight =
                this.height - this.headerHeight - this.footerHeight
            this.rightWidth = this.width - this.leftWidth
        })

        window.onresize = () => {
            return (() => {
                this.width = window.innerWidth
                this.height = window.innerHeight
                this.mainHeight =
                    this.height - this.headerHeight - this.footerHeight
                this.rightWidth = this.width - this.leftWidth
            })()
        }
    }
}
</script>

<style lang="scss" scoped>
.layout {
    background: darkcyan;
    display: flex;

    .layout-left {
        background: rgb(224, 123, 123);

        .layout-left-logo {
            background: rgb(107, 202, 150);
        }

        .layout-left-menu {
            background: rgb(107, 145, 202);
        }
    }

    .layout-right {
        background: rgb(200, 247, 114);

        .layout-header {
            background: darkgoldenrod;
        }

        .layout-main {
            background: darkorchid;

            overflow-y: auto;
            white-space: nowrap;

            .layout-main-content {
                width: 100%;
                white-space: nowrap;
                // justify-content: flex-start;
                // display: flex;
                // align-items: center;
            }
        }

        .layout-footer {
            background: darkseagreen;
        }
    }
}
</style>