Main.vue 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869
  1. <template>
  2. <div id='page-main' v-bind:class='{"page-sidebar-closed": sidebarClosed}'>
  3. <page-header></page-header>
  4. <div id='page-container' class='page-container'>
  5. <page-sidebar></page-sidebar>
  6. <div id='page-content-wrapper' class='page-content-wrapper'>
  7. <div class='page-bar'>
  8. <el-breadcrumb separator='/'>
  9. <!-- <el-breadcrumb-item :to='{ path: "/" }'>首页</el-breadcrumb-item> -->
  10. <el-breadcrumb-item v-for='(b, index) in breadcrumb' :key='index' :to='b.path ? { path: b.path } : null'>{{b.label}}</el-breadcrumb-item>
  11. </el-breadcrumb>
  12. </div>
  13. <!-- <router-view class='page-content'/> -->
  14. <keep-alive>
  15. <router-view v-if='$route.meta.keepAlive' class='page-content'></router-view>
  16. </keep-alive>
  17. <router-view v-if='!$route.meta.keepAlive' class='page-content'></router-view>
  18. </div>
  19. </div>
  20. <!-- <div class='page-footer'>
  21. © 2016 SAGACLOUD. All rights reserved 京ICP备16059843号-1
  22. </div>-->
  23. </div>
  24. </template>
  25. <script>
  26. import { mapGetters, mapMutations } from 'vuex'
  27. import PageHeader from './PageHeader'
  28. import PageSidebar from './PageSidebar'
  29. export default {
  30. name: 'Main',
  31. components: {
  32. 'page-header': PageHeader,
  33. 'page-sidebar': PageSidebar
  34. },
  35. props: [],
  36. data() {
  37. return {}
  38. },
  39. computed: {
  40. ...mapGetters('layout', ['sidebarClosed', 'breadcrumb'])
  41. },
  42. methods: {
  43. ...mapMutations('layout', ['setSidebarClosed']),
  44. windwoResize() {
  45. // 窗口大小发生变化时
  46. let clientWidth = `${document.documentElement.clientWidth}`
  47. let clientHeight = `${document.documentElement.clientHeight}`
  48. //this.setPageContentHeight(height)
  49. if (clientWidth > 1000) {
  50. this.setSidebarClosed(false)
  51. } else if (clientWidth > 800) {
  52. this.setSidebarClosed(true)
  53. } else {
  54. this.setSidebarClosed(false)
  55. }
  56. }
  57. },
  58. created() {
  59. // console.log('--------------------- Main created')
  60. // console.log(this.$store.getters.flag)
  61. },
  62. mounted() {
  63. this.windwoResize()
  64. window.onresize = this.windwoResize
  65. }
  66. }
  67. </script>