먼저 효과를 보고
- 스타일이 설정되기 전: 레이아웃이 전체 페이지를 채우지 않고 왼쪽 메뉴의 내용이 확장됨에 따라 레이아웃의 높이가 변경됩니다.
- 스타일 설정 후: 레이아웃이 전체 페이지를 채우고 왼쪽 메뉴 콘텐츠가 확장된 후 레이아웃 높이에 영향을 주지 않음 왼쪽 메뉴 콘텐츠가 페이지 높이를 초과하는 경우 , 스크롤 막대가 자동으로 추가됩니다
프로젝트 구조 디렉토리:
스타일링 전 코드:
app.vue
<template>
<Home/>
</template>
<script>
import Home from './components/Home.vue'
export default {
name: 'App',
components: {
Home
}
}
</script>
<style>
@import './assets/css/reset.css';
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
</style>
Home.vue
<template>
<div class="home">
<el-container>
<el-header><Header/></el-header>
<el-container class="content">
<Menu/>
<el-container>
<el-main>Main</el-main>
<el-footer><Footer/></el-footer>
</el-container>
</el-container>
</el-container>
</div>
</template>
<script setup>
import Header from '../components/common/Header.vue'
import Menu from '../components/common/Menu.vue'
import Footer from '../components/common/Footer.vue'
</script>
<style scoped lang="less">
.home{
.el-container{
.el-header{
background-color: #CCCCFF;
}
.el-footer{
background-color: #CCFFFF;
}
.el-main{
background-color: #FFCCCC;
}
}
}
</style>
코드는 요소 플러스의 컨테이너 레이아웃 컨테이너에서 가져옵니다.
Menu.vue
<template>
<div class="menu">
<el-aside width="200px">
<el-menu
active-text-color="#ffd04b"
background-color="#66CCCC"
class="el-menu-vertical-demo"
default-active="2"
text-color="#fff"
@open="handleOpen"
@close="handleClose"
>
<el-sub-menu index="1">
<template #title>
<el-icon><location /></el-icon>
<span>Navigator One</span>
</template>
<el-menu-item-group title="Group One">
<el-menu-item index="1-1">item one</el-menu-item>
<el-menu-item index="1-2">item two</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="Group Two">
<el-menu-item index="1-3">item three</el-menu-item>
</el-menu-item-group>
<el-sub-menu index="1-4">
<template #title>item four</template>
<el-menu-item index="1-4-1">item one</el-menu-item>
</el-sub-menu>
</el-sub-menu>
<el-menu-item index="2">
<el-icon><icon-menu /></el-icon>
<span>Navigator Two</span>
</el-menu-item>
<el-menu-item index="3" disabled>
<el-icon><document /></el-icon>
<span>Navigator Three</span>
</el-menu-item>
<el-menu-item index="4">
<el-icon><setting /></el-icon>
<span>Navigator Four</span>
</el-menu-item>
<el-sub-menu index="5">
<template #title>
<el-icon><location /></el-icon>
<span>Navigator One</span>
</template>
<el-menu-item-group title="Group One">
<el-menu-item index="1-1">item one</el-menu-item>
<el-menu-item index="1-2">item two</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="Group Two">
<el-menu-item index="1-3">item three</el-menu-item>
</el-menu-item-group>
<el-sub-menu index="1-4">
<template #title>item four</template>
<el-menu-item index="1-4-1">item one</el-menu-item>
</el-sub-menu>
</el-sub-menu>
</el-menu>
</el-aside>
</div>
</template>
<script setup>
import {
Document,
Menu as IconMenu,
Location,
Setting,
} from '@element-plus/icons-vue'
const handleOpen = (key, keyPath) => {
console.log(key, keyPath)
}
const handleClose = (key, keyPath) => {
console.log(key, keyPath)
}
</script>
<style lang="less" scoped>
</style>
코드는 요소 플러스의 메뉴 메뉴에서 가져옵니다.
스타일 설정:
Home.vue 및 Menu.vue에 각각 다음 스타일을 추가합니다.
Home.vue
<style scoped lang="less">
.home{
.el-container{
// 新加的样式 实现绝对定位
.content{
position: absolute;
top:60px;
bottom: 0;
width: 100%;
}
.el-header{
background-color: #CCCCFF;
}
.el-footer{
background-color: #CCFFFF;
}
.el-main{
background-color: #FFCCCC;
}
}
}
</style>
Menu.vue
<style lang="less" scoped>
.menu{
.el-aside{
height: 100%;
.el-menu{
height: 100%;
}
}
}
</style>
참고: Home.vue 스타일만 추가하면 다음과 같은 효과가 나타나며 메뉴가 페이지를 채우지 않습니다.