<template>
|
<el-container class="base-container">
|
<el-header ref="headerRef" class="base-header">
|
<slot name="header"></slot>
|
</el-header>
|
<el-container>
|
<el-aside class="base-aside" :style="{ height: mainHeight + 'px', width: asideWidth }">
|
<el-scrollbar :noresize="false">
|
<slot name="aside"></slot>
|
</el-scrollbar>
|
</el-aside>
|
<el-main class="base-main" :style="{ height: mainHeight + 'px' }">
|
<el-scrollbar :noresize="false">
|
<div style="padding: 0 8px 0 8px">
|
<slot name="main"></slot>
|
</div>
|
</el-scrollbar>
|
</el-main>
|
</el-container>
|
</el-container>
|
</template>
|
|
<script>
|
export default {
|
inject: ['contentMaxHeight', 'headerHeight'],
|
props: {
|
asideWidth: {
|
type: String,
|
default: '300px',
|
},
|
},
|
// 右侧操作界面基础布局
|
data() {
|
return {
|
mainHeight: this.contentMaxHeight,
|
}
|
},
|
methods: {
|
// 内容高度
|
calHeight() {
|
if (this.$refs.headerRef) {
|
const h1 = this.$refs.headerRef.$el.offsetHeight
|
const h = h1
|
return this.contentMaxHeight - h
|
// return `calc(100vh - ${h}px - 60px - var(--el-main-padding) * 2 + 6px)`;
|
} else {
|
return this.contentMaxHeight
|
}
|
},
|
},
|
mounted() {
|
setTimeout(() => {
|
this.mainHeight = this.calHeight()
|
}, 200)
|
},
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.base-container {
|
// height: calc(100vh - 60px);
|
// background-color: aliceblue;
|
position: relative;
|
}
|
.base-aside {
|
/* width: initial; */
|
/* overflow-x: auto; */
|
position: relative;
|
// height: calc(100vh - 60px * 2 - 20px * 2);
|
/* background-color: aqua; */
|
/* overflow-y: auto; */
|
border-right: 1px solid var(--el-color-info-light-7);
|
/* box-shadow: -10px 0px 4px rgba(0, 0, 0, 0.12) inset; */
|
}
|
|
.base-header {
|
height: initial;
|
// padding: 0 0 4px 0;
|
/* background-color: rgb(216, 201, 201); */
|
/* border-bottom: 1px solid var(--el-color-info-light-7); */
|
/* margin-bottom: 4px; */
|
}
|
|
.base-main {
|
position: relative;
|
padding: 0;
|
/* background-color: whitesmoke; */
|
/* height: calc(100vh - 60px * 2 - 20px * 2); */
|
/* overflow: hidden; */
|
}
|
</style>
|
