PixelAI-admin/vue-admin-wonderful-next/src/views/layout/component/main.vue

<template>
  <el-main>
    <el-scrollbar class="layout-scrollbar" ref="layoutScrollbarRef"
      :style="{minHeight: `calc(100vh - ${headerHeight}`}">
      <LayoutParentView />
      <Footer v-if="getThemeConfig.isFooter" />
    </el-scrollbar>
  </el-main>
</template>

<script lang="ts">
import {
  computed,
  defineComponent,
  toRefs,
  reactive,
  getCurrentInstance,
  watch,
} from "vue";
import { useStore } from "/@/store/index.ts";
import LayoutParentView from "/@/views/layout/routerView/parent.vue";
import Footer from "/@/views/layout/footer/index.vue";
export default defineComponent({
  name: "layoutMain",
  components: { LayoutParentView, Footer },
  setup() {
    const { proxy } = getCurrentInstance();
    const store = useStore();
    const state = reactive({
      headerHeight: "84px",
    });
    // 获取布局配置信息
    const getThemeConfig = computed(() => {
      return store.state.themeConfig;
    });
    // 监听 themeConfig 配置文件的变化，更新菜单 el-scrollbar 的高度
    watch(store.state.themeConfig, (val) => {
      state.headerHeight = val.isTagsview ? "84px" : "50px";
      if (val.isFixedHeaderChange !== val.isFixedHeader) {
        if (!proxy.$refs.layoutScrollbarRef) return false;
        proxy.$refs.layoutScrollbarRef.update();
      }
    });
    return {
      getThemeConfig,
      ...toRefs(state),
    };
  },
});
</script>