123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687 |
- <template>
- <div id='page-main' v-bind:class='{"page-sidebar-closed": sidebarClosed}'>
- <page-header></page-header>
- <div id='page-container' class='page-container'>
- <page-sidebar></page-sidebar>
- <div id='page-content-wrapper' class='page-content-wrapper'>
- <div class='page-bar'>
- <el-breadcrumb separator='/'>
- <el-breadcrumb-item v-show="!breadcrumb.length" :to='{ path: "/" }'>首页</el-breadcrumb-item>
- <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>
- </el-breadcrumb>
- </div>
- <!-- <router-view class='page-content'/> -->
- <keep-alive>
- <router-view v-if='$route.meta.keepAlive' class='page-content'></router-view>
- </keep-alive>
- <router-view v-if='!$route.meta.keepAlive' class='page-content'></router-view>
- </div>
- </div>
- <!-- <div class='page-footer'>
- © 2016 SAGACLOUD. All rights reserved 京ICP备16059843号-1
- </div>-->
- </div>
- </template>
- <script>
- import { mapGetters, mapMutations } from 'vuex'
- import PageHeader from './PageHeader'
- import PageSidebar from './PageSidebar'
- import menus from '@/data/menus'
- export default {
- name: 'Main',
- components: {
- 'page-header': PageHeader,
- 'page-sidebar': PageSidebar
- },
- props: [],
- data() {
- return {
- isPath: false
- }
- },
- computed: {
- ...mapGetters('layout', ['sidebarClosed', 'breadcrumb'])
- },
- methods: {
- ...mapMutations('layout', ['setSidebarClosed','setSidebarSelected']),
- windwoResize() {
- // 窗口大小发生变化时
- let clientWidth = `${document.documentElement.clientWidth}`
- let clientHeight = `${document.documentElement.clientHeight}`
- //this.setPageContentHeight(height)
- if (clientWidth > 1000) {
- this.setSidebarClosed(false)
- } else if (clientWidth > 800) {
- this.setSidebarClosed(true)
- } else {
- this.setSidebarClosed(false)
- }
- },
- findPathInArray(arr, path) {
- arr.forEach(ele => {
- if(ele.path == path) {
- this.isPath = true
- }
- if(ele.children) {
- this.findPathInArray(ele.children, path)
- }
- })
- }
- },
- watch: {
- "$route": {
- handler: function(route, oldVal){
- let path = route.path
- this.isPath = false;
- this.findPathInArray(menus,path)
- if(this.isPath) {
- this.setSidebarSelected(path)
- }
- },
- // 深度观察监听
- deep: true
- }
- },
- }
- </script>
|