菜单栏 menu + 与侧边栏 aside 实现叠收

menu 的基本使用：

//munu中提供
//mode="horizontal"    　　菜单方式改为水平，默认为竖直 (vertical) 方向
//background-color="" text-color="" active-text-color=""    　　背景颜色、文字颜色、点击的颜色
//:unique-opened="true"    保持只展开一个子菜单，默认为false
//:router="true"    　　　　实现路由跳转 点击跳转到 index 的路径
//disabled    　　　　　　　　禁用属性
//default-active="1-2-1"    　　默认显示激活当前1-2-1子菜单
//collapse="true"    　　　　水平折叠收起菜单，默认为false，且当mode为竖直方向时才可用
<el-menu>
//菜单里的大分组用：el-submenu
//必须要加 #title 才能显示出标题
//必须要写 index 这是唯一标志
//disabled    禁用属性
<el-submenu index="1">
    <template #title>大标题一</template>
    <el-munu-item index="1-1">选项1-1</el-menu-item>
</el-submenu>

//菜单分组里的小分组：在 el-submenu 里面嵌套 menu-item-group
<el-submenu index="2">
    <template #title>大标题二</template>
    <el-menu-item-group>
        <template #title>小标题一</template>
        <el-munu-item index="2-1-1">选项2-1-1</el-menu-item>
        <el-munu-item index="2-1-2">选项2-1-2</el-menu-item>
    </el-menu-item-group>
    <el-menu-item-group>
        <template #title>小标题二</template>
        <el-munu-item index="2-2-1">选项2-2-1</el-menu-item>
        <el-munu-item index="2-2-1">选项2-2-2</el-menu-item>
    </el-menu-item-group>
</el-submenu>

</el-menu>

 

---

 

实现点击一个按钮 控制菜单的水平叠收：

//创建一个按钮设置折叠，点击事件触发方法：
<el-button @click="handisCollapse">折叠按钮</el-button>
<el-menu 
:collapse="isCollapse"        //在 menu 中动态绑定 collapse
:collapse-transition="false"        //关闭折叠动画
>...</el-menu>

//创建isCollapse的值
//创建方法，点击取反
<script>
export default {
data() {
    return{
        isCollapse: flase    //不能加 '' !!!!
    }
    },
methods: {
    handisCollapse() {
        this.isCollapse = !this.isCollapse;
    }
    }
}
</script>

设置动态左边框 aside 的宽度(与 menu 宽度相适应)：

<el-aside :width="isCollapse ? '64px' : '250px' ">

 

菜单栏 不齐  在 menu 中设置外边框边距为0 ：　　style="border-right-width: 0px"