根据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"
>
&