Vue3+element plus realiza el estilo de diseño del sistema de gestión

primer vistazo al efecto

• Antes de establecer el estilo: el diseño no ocupa toda la página y la altura del diseño cambiará a medida que se expanda el contenido del menú de la izquierda

• Después de configurar el estilo: el diseño llena toda la página, y el contenido del menú de la izquierda no afectará la altura del diseño después de expandir el contenido del menú de la izquierda. Cuando el contenido del menú de la izquierda excede la altura de la página , una barra de desplazamiento se agregará automáticamente

 Directorio de estructura del proyecto:

 

Código antes de diseñar: 

aplicación.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>

 Inicio.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>

El código proviene del contenedor de diseño del contenedor en el elemento más

Menú.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>

El código proviene del menú Menú en el elemento más

 Establece el estilo:

Agregue los siguientes estilos a Home.vue y Menu.vue respectivamente

Inicio.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>

Menú.vue

<style lang="less" scoped>
.menu{
  .el-aside{
    height: 100%;
    .el-menu{
      height: 100%;
    }
  }
}
</style>

Nota: Si solo se agrega el estilo Home.vue, aparecerá el siguiente efecto, el menú no llena la página