You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
72 lines
1.8 KiB
72 lines
1.8 KiB
4 years ago
|
<template>
|
||
|
|
<div class="wrapper">
|
||
|
|
<div class="placeholder"></div>
|
||
|
|
<div class="fixed">
|
||
|
|
<v-head></v-head>
|
||
|
|
<v-sidebar></v-sidebar>
|
||
|
|
</div>
|
||
|
|
<div class="content-box" :class="{'content-collapse':collapse}">
|
||
|
|
<!-- <v-tags></v-tags> -->
|
||
|
|
<div class="content">
|
||
|
|
<transition name="move" mode="out-in">
|
||
|
|
<keep-alive :include="tagsList">
|
||
|
|
<router-view></router-view>
|
||
|
|
</keep-alive>
|
||
|
|
</transition>
|
||
|
|
<el-backtop target=".content"></el-backtop>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<v-footer ref="footer"></v-footer>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import vHead from './Header.vue';
|
||
|
|
import vSidebar from './Sidebar.vue';
|
||
|
|
import vFooter from './Footer'
|
||
|
|
import vTags from './Tags.vue';
|
||
|
|
import bus from './bus';
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
tagsList: [],
|
||
|
|
collapse: false
|
||
|
|
};
|
||
|
|
},
|
||
|
|
components: {
|
||
|
|
vHead,
|
||
|
|
vSidebar,
|
||
|
|
vFooter,
|
||
|
|
vTags
|
||
|
|
},
|
||
|
|
created() {
|
||
|
|
bus.$on('collapse-content', msg => {
|
||
|
|
this.collapse = msg;
|
||
|
|
});
|
||
|
|
|
||
|
|
// 只有在标签页列表里的页面才使用keep-alive，即关闭标签之后就不保存到内存中了。
|
||
|
|
bus.$on('tags', msg => {
|
||
|
|
let arr = [];
|
||
|
|
for (let i = 0, len = msg.length; i < len; i++) {
|
||
|
|
msg[i].name && arr.push(msg[i].name);
|
||
|
|
}
|
||
|
|
this.tagsList = arr;
|
||
|
|
});
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.fixed{
|
||
|
|
z-index: 10;
|
||
|
|
position: fixed;
|
||
|
|
top: 0;
|
||
|
|
width: 100%;
|
||
|
|
background-color: #fff;
|
||
|
|
}
|
||
|
|
.placeholder{
|
||
|
|
height: 120px;
|
||
|
|
&.mini{
|
||
|
|
height: 60px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|