123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869 |
- <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 :to='{ path: "/" }'>首页</el-breadcrumb-item> -->
- <el-breadcrumb-item 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'
- export default {
- name: 'Main',
- components: {
- 'page-header': PageHeader,
- 'page-sidebar': PageSidebar
- },
- props: [],
- data() {
- return {}
- },
- computed: {
- ...mapGetters('layout', ['sidebarClosed', 'breadcrumb'])
- },
- methods: {
- ...mapMutations('layout', ['setSidebarClosed']),
- 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)
- }
- }
- },
- created() {
- // console.log('--------------------- Main created')
- // console.log(this.$store.getters.flag)
- },
- mounted() {
- this.windwoResize()
- window.onresize = this.windwoResize
- }
- }
- </script>
|