web_dist/src/layout/PageLayer.vue

<template>
  <el-container style="box-sizing: border-box">
    <el-header v-if="useSlots().header" ref="headerRef" class="header">
      <slot name="header"></slot>
    </el-header>
    <el-header v-if="useSlots().headerBlock" ref="headerRef" class="header" style="display: block">
      <slot name="headerBlock"></slot>
    </el-header>
    <el-container>
      <slot name="arbitrarily"/>
      <el-aside v-if="useSlots().aside" class="aside" :style="mainStyleSize" ref="asideRef">
        <slot name="aside" :size="{height:heightRef,width:asideRef?.$el?.clientWidth}"></slot>
      </el-aside>
      <el-main :style="mainStyleSize" class="page_main" ref="mainRef" v-if="useSlots().main">
        <slot name="main" :size="{height:heightRef,width:mainRef?.$el?.clientWidth}"></slot>
      </el-main>
      <el-main class="page_main" style="height: max-content;" ref="mainRef" v-if="useSlots().mainMaxContentHeight">
        <slot name="mainMaxContentHeight"></slot>
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup name='PageLayer' lang="ts">
import {nextTick, onMounted, Ref, ref, useSlots} from "vue";
import {getVisibleSize, visibleWindowSize} from "@/utils/window-size"

const mainStyleSize: object = ref({})

const headerRef: Ref<HTMLElement> = ref(null)
const asideRef: Ref<HTMLElement> = ref(null)
const mainRef: Ref<HTMLElement> = ref(null)

const heightRef = ref<number>(0)

getVisibleSize((val) => {
  let clientHeight = (val.height - headerRef.value?.$el.clientHeight) + 'px'
  mainStyleSize.value = {
    maxHeight: clientHeight,
    minHeight: clientHeight,
  }
  heightRef.value = val.height - headerRef.value?.$el?.clientHeight
})

onMounted(async () => {
  await nextTick()
  let val = visibleWindowSize.value
  let clientHeight = (val.height - headerRef.value?.$el.clientHeight) + 'px'
  mainStyleSize.value = {
    maxHeight: clientHeight,
    minHeight: clientHeight,
  }
  heightRef.value = val.height - headerRef.value?.$el?.clientHeight
})

</script>

<style scoped lang="scss">
.header {
  border-radius: 4px;
  background-color: white;
  margin-bottom: 4px;
  padding: 6px;
  height: max-content;
  box-shadow: var(--el-box-shadow-light);
}

.aside {
  border-radius: 4px;
  background-color: white;
  margin-right: 4px;
  overflow: auto;
  width: max-content;
  max-width: 300px;
}

.page_main {
  overflow: auto;
  border-radius: 4px;
  padding: 4px;
  background-color: white;
  box-sizing: border-box;
}
</style>