defaults.vue 977 B

1234567891011121314151617181920212223242526272829303132333435363738394041
  1. <template>
  2. <el-container class="layout-container">
  3. <Asides />
  4. <el-container class="flex-center layout-backtop">
  5. <Headers v-if="isFixedHeader" />
  6. <el-scrollbar ref="layoutDefaultsScrollbarRef">
  7. <Headers v-if="!isFixedHeader" />
  8. <Mains />
  9. </el-scrollbar>
  10. </el-container>
  11. <el-backtop target=".layout-backtop .el-scrollbar__wrap"></el-backtop>
  12. </el-container>
  13. </template>
  14. <script>
  15. import Asides from '@/layout/component/aside.vue';
  16. import Headers from '@/layout/component/header.vue';
  17. import Mains from '@/layout/component/main.vue';
  18. export default {
  19. name: 'layoutDefaults',
  20. components: { Asides, Headers, Mains },
  21. data() {
  22. return {};
  23. },
  24. computed: {
  25. // 是否开启固定 header
  26. isFixedHeader() {
  27. return this.$store.state.themeConfig.themeConfig.isFixedHeader;
  28. },
  29. },
  30. watch: {
  31. // 监听路由的变化
  32. $route: {
  33. handler() {
  34. this.$refs.layoutDefaultsScrollbarRef.wrap.scrollTop = 0;
  35. },
  36. deep: true,
  37. },
  38. },
  39. };
  40. </script>