el-aside中添加el-menu设置collapse宽度自适应

最新推荐文章于 2024-08-15 09:43:14 发布

wocjy

最新推荐文章于 2024-08-15 09:43:14 发布

阅读量2.1k

点赞数 18

文章标签： vue.js javascript 前端 el-aside el-menu element-plus

本文链接：https://blog.csdn.net/wocjy/article/details/136558056

版权

在 Vue3 项目中使用 Element Plus，当 el-aside 内包含 el-menu 并设置 collapse 为 true 时，el-menu 能够正确折叠，但 el-aside 宽度不变。原因是 el-aside 的 width 默认为 300px 的 CSS 变量。为实现宽度自适应，可通过设置 CSS 变量 --el-aside-width 为 auto。此外，深入源码发现，当 el-aside 具有 width 属性时，会覆盖默认值，从而达到自适应效果。

摘要由CSDN通过智能技术生成

根据vue3官方提供的命令行创建项目后，引入element-plus后，尝试通过Container布局容器创建一个简单布局后，在<el-aside>引入<el-menu>后设置collapse为true，<el-menu>进行了折叠，但是<el-aside>并没有折叠，源代码如下：

<script setup lang="ts">
import { ref } from 'vue'
import { Bell, Open, TurnOff, Menu as IconMenu } from '@element-plus/icons-vue'
//el-menu是否水平折叠
const isCollapse = ref(false)

//点击el-icon
const turnCollapse = () => {
  isCollapse.value = !isCollapse.value
}
</script>

<template>
  <div class="common-layout">
    <!-- container布局容器 -->
    <el-container class="app-el-container">
      <!-- 左侧树形菜单布局容器 -->
      <el-aside>
        <!-- 树形菜单 -->
        <el-menu
          default-active="1"
          :collapse="isCollapse"
        >
          <el-menu-item index="1">
            <el-icon>
              <Bell />
            </el-icon>
            <span>菜单1</span>
          </el-menu-item>
          <el-menu-item index="2">
            <el-icon>
              <icon-menu />
            </el-icon>
            <span>菜单2</span>
          </el-menu-item>
        </el-menu>
      </el-aside>

      <!-- 右侧布局包含el-header、el-main、el-footer -->
      <el-container>
        <el-header>
          <!-- 按钮用于控制左侧树形菜单是否水平折叠 -->
          <el-icon
            :size="50"
            @click="turnCollapse"
          >
            <O