columns.vue 964 B

123456789101112131415161718192021222324252627282930313233
  1. <template>
  2. <el-container class="layout-container">
  3. <ColumnsAside />
  4. <div class="layout-columns-warp">
  5. <Asides />
  6. <el-container class="flex-center layout-backtop">
  7. <Headers v-if="isFixedHeader" />
  8. <el-scrollbar>
  9. <Headers v-if="!isFixedHeader" />
  10. <Mains />
  11. </el-scrollbar>
  12. </el-container>
  13. </div>
  14. <el-backtop target=".layout-backtop .el-scrollbar__wrap"></el-backtop>
  15. </el-container>
  16. </template>
  17. <script>
  18. import Asides from '@/layout/component/aside.vue';
  19. import Headers from '@/layout/component/header.vue';
  20. import Mains from '@/layout/component/main.vue';
  21. import ColumnsAside from '@/layout/component/columnsAside.vue';
  22. export default {
  23. name: 'layoutColumns',
  24. components: { Asides, Headers, Mains, ColumnsAside },
  25. computed: {
  26. // 是否开启固定 header
  27. isFixedHeader() {
  28. return this.$store.state.themeConfig.themeConfig.isFixedHeader;
  29. },
  30. },
  31. };
  32. </script>