<template>
|
<div class="home-index-page" ref="page" >
|
<!-- <div class="com"><module-a /></div> -->
|
<div class="divider"></div>
|
<div class="com"><module-b /></div>
|
</div>
|
</template>
|
|
<script>
|
import ModuleA from './ModuleA.vue'
|
import ModuleB from './ModuleB.vue'
|
import ModuleC from './ModuleC.vue'
|
export default {
|
name: 'HomeIndexPage',
|
components: { ModuleA, ModuleB, ModuleC },
|
data() {
|
return {
|
pageHeight: '100%'
|
}
|
},
|
watch: {
|
'$store.state.app.multiTab': {
|
deep: true,
|
handler: (newVal, oldVal) => {
|
this.calPageHeight(newVal)
|
}
|
}
|
},
|
methods: {
|
calPageHeight(hasTab) {
|
if (hasTab) {
|
const _h = this.$refs.page.clientHeight
|
if (_h) {
|
this.pageHeight = (_h - 42) + 'px'
|
}
|
} else {
|
this.pageHeight = '100%'
|
}
|
},
|
initPageHeight(callback) {
|
setTimeout(() => {
|
this.calPageHeight(this.$store.state.app.multiTab)
|
callback && callback()
|
}, 100)
|
}
|
},
|
mounted() {
|
this.initPageHeight()
|
}
|
}
|
</script>
|
|
<style lang="less" scoped>
|
.home-index-page{
|
display: flex;
|
flex-direction:column;
|
|
.com{
|
flex:1;
|
}
|
|
.divider{
|
height: 10px;
|
}
|
}
|
</style>
|
