Main.vue 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687
  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 v-show="!breadcrumb.length" :to='{ path: "/" }'>首页</el-breadcrumb-item>
  10. <el-breadcrumb-item v-show="breadcrumb.length" 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. import menus from '@/data/menus'
  30. export default {
  31. name: 'Main',
  32. components: {
  33. 'page-header': PageHeader,
  34. 'page-sidebar': PageSidebar
  35. },
  36. props: [],
  37. data() {
  38. return {
  39. isPath: false
  40. }
  41. },
  42. computed: {
  43. ...mapGetters('layout', ['sidebarClosed', 'breadcrumb'])
  44. },
  45. methods: {
  46. ...mapMutations('layout', ['setSidebarClosed','setSidebarSelected']),
  47. windwoResize() {
  48. // 窗口大小发生变化时
  49. let clientWidth = `${document.documentElement.clientWidth}`
  50. let clientHeight = `${document.documentElement.clientHeight}`
  51. //this.setPageContentHeight(height)
  52. if (clientWidth > 1000) {
  53. this.setSidebarClosed(false)
  54. } else if (clientWidth > 800) {
  55. this.setSidebarClosed(true)
  56. } else {
  57. this.setSidebarClosed(false)
  58. }
  59. },
  60. findPathInArray(arr, path) {
  61. arr.forEach(ele => {
  62. if(ele.path == path) {
  63. this.isPath = true
  64. }
  65. if(ele.children) {
  66. this.findPathInArray(ele.children, path)
  67. }
  68. })
  69. }
  70. },
  71. watch: {
  72. "$route": {
  73. handler: function(route, oldVal){
  74. let path = route.path
  75. this.isPath = false;
  76. this.findPathInArray(menus,path)
  77. if(this.isPath) {
  78. this.setSidebarSelected(path)
  79. }
  80. },
  81. // 深度观察监听
  82. deep: true
  83. }
  84. },
  85. }
  86. </script>