<template> <div class="layout" :class="{'header-fixed': headerFixed}"> <slot name="header" v-if="hasHeader"></slot> <div class="layout-content-flex"> <div class="layout-content"> <slot></slot> </div> </div> </div> </template> <script> import {has} from 'lodash'; export default { name: 'Layout', data() { return { hasHeader: false, headerFixed: false }; }, created() { if (has(this.$slots, 'header')) { this.hasHeader = true; } if (has(this.$slots, 'header[0].componentOptions.propsData.fixed')) { this.headerFixed = true; } }, }; </script> <style lang="scss" scoped> .layout { width: 100%; height: 100%; overflow: hidden; position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; background-color: #fff; font-size: 24px; &.header-fixed { display: block; .layout-content { width: 100%; height: 100%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; } /deep/ .layout-header { position: relative; z-index: 2; } } .layout-content-flex { width: 100%; height: 100%; flex: 1; position: relative; overflow: hidden; -webkit-overflow-scrolling: touch; .layout-content { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } } } </style>