时间戳

首页 > 解决方案 > Vue element-io折叠侧菜单问题

javascript - Vue element-io折叠侧菜单问题

问题描述

我尝试使用element-io库实现一个简单的管理面板。

我的问题是当 sidemenu 被隐藏时，内容不占 100%，修复它的唯一方法是禁用菜单动画并在使用 css 折叠时强制其宽度更小：

aside.menu-collapsed {
    width: 64px !important;
}

我的布局如下所示：

模板：

<template>
    <el-container>
        <el-aside v-bind:class="[isCollapse ? 'menu-collapsed' : 'menu-expanded']">
            <el-menu :router="true"
                     :default-active="$route.path"
                     :collapse="isCollapse"
                     :collapse-transition="true"
                     class="el-menu-vertical"
            >

                <template v-for="rule in routes">
                    :
                    :
                </template>
            </el-menu>
        </el-aside>

        <el-container>
            <el-header height="100">
                <span v-on:click="collapseSidebar()">
                    <i class="fas fa-bars"></i>
                </span>
            </el-header>

            <el-main>
                <router-view></router-view>
            </el-main>

        </el-container>
    </el-container>
</template>

CSS：

<style>
.el-menu-vertical {
    height: 100vh;
}
.el-menu-vertical:not(.el-menu--collapse) {
    width: 100%;
}

.el-header {
    background-color: #b4bbc1;
    color: #333;
    line-height: 56px;
}
</style>

知道折叠侧菜单时如何使内容宽度增加吗？

标签： javascriptcssvuejs2element-io

解决方案

这就是我所做的

<el-aside :span="4" v-bind:style='{"width": (isCollapse? "64px" : "300px" )}'> . .

<span @click="isCollapse = !isCollapse"><i class="fas fa-bars"></i></span>

推荐阅读