forked from liweijie/education
87 lines
1.6 KiB
Vue
87 lines
1.6 KiB
Vue
<template>
|
||
<section class="app-main">
|
||
<transition name="fade-transform" mode="out-in">
|
||
<keep-alive :include="cachedViews">
|
||
<router-view v-if="!$route.meta.link" :key="key" />
|
||
</keep-alive>
|
||
</transition>
|
||
<iframe-toggle />
|
||
</section>
|
||
</template>
|
||
|
||
<script>
|
||
import iframeToggle from "./IframeToggle/index"
|
||
|
||
export default {
|
||
name: 'AppMain',
|
||
components: { iframeToggle },
|
||
computed: {
|
||
cachedViews() {
|
||
return this.$store.state.tagsView.cachedViews
|
||
},
|
||
key() {
|
||
return this.$route.path
|
||
}
|
||
},
|
||
watch: {
|
||
$route() {
|
||
this.addIframe()
|
||
}
|
||
},
|
||
mounted() {
|
||
this.addIframe()
|
||
},
|
||
methods: {
|
||
addIframe() {
|
||
const { name } = this.$route
|
||
if (name && this.$route.meta.link) {
|
||
this.$store.dispatch('tagsView/addIframeView', this.$route)
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.app-main {
|
||
/* 顶部 Header 已移出主容器，主内容在 flex 列中占满剩余空间 */
|
||
flex: 1;
|
||
min-height: 0;
|
||
width: 100%;
|
||
position: relative;
|
||
overflow-y: auto;
|
||
scrollbar-gutter: stable;
|
||
background-color: #fff;
|
||
|
||
&:fullscreen,
|
||
&:-webkit-full-screen,
|
||
&:-moz-full-screen,
|
||
&:-ms-fullscreen {
|
||
background: #fff;
|
||
overflow-y: auto;
|
||
}
|
||
}
|
||
|
||
.hasTagsView {
|
||
.app-main {
|
||
/* tags-view 高度 34px，AppMain 在 flex 列中由父容器约束高度 */
|
||
min-height: 0;
|
||
}
|
||
}
|
||
</style>
|
||
|
||
<style lang="scss">
|
||
::-webkit-scrollbar {
|
||
width: 6px;
|
||
height: 6px;
|
||
}
|
||
|
||
::-webkit-scrollbar-track {
|
||
background-color: #f1f1f1;
|
||
}
|
||
|
||
::-webkit-scrollbar-thumb {
|
||
background-color: #c0c0c0;
|
||
border-radius: 3px;
|
||
}
|
||
</style> |