NavMenu 可以在 element-ui 中响应吗？

Posted 2023-02-22

【中文标题】NavMenu 可以在 element-ui 中响应吗？

【英文标题】：Can a NavMenu be responsive in element-ui?

【发布时间】：2018-06-26 15:30:07

【问题描述】：

我正在尝试基于 vue.js 和 element-ui 组件制作响应式 SPA。它具有开箱即用的响应式布局并且工作正常，但我不知道如何使 NavMenu (el-menu) 组件向上移动或隐藏在移动设备上的“汉堡”下。 当前结果只是内容上方的垂直菜单，因此您需要向下滚动一段时间。 我的 app.vue 布局：

<el-row>
    <el-col>
        <el-row type="flex" justify="space-between" align="middle">
            <el-col :span="6">
                <img src="/Assets/images/logo.png"  align="left" />
                <h2>Admin</h2>
            </el-col>
            <el-col :span="2">
                <sign-in></sign-in>
            </el-col>
        </el-row>
        <el-row :gutter="10">
            <el-col :xs="3" :lg="8" :xl="3">
                <el-menu v-if="user.authenticated" style="min-height: 960px; background-color: #fff" v-bind:router="true">
                    <el-menu-item index="/offers">
                        <i class="el-icon-star-off"></i>
                        <span>Offers</span>
                    </el-menu-item>
                    ...
                </el-menu>
            </el-col>
            <el-col :xs="21" :lg="16" :xl="21">
                <router-view style="width:100%;"></router-view>
            </el-col>
        </el-row>
    </el-col>
</el-row>

【参考方案1】：

Element，不是为移动平台设计的，是为后台管理系统设计的。我不确定团队是否有支持响应式设计的计划。另一方面，Element 团队提供了一个响应式网格系统来实现灵活的布局。

如果您考虑构建响应式导航菜单，那么您必须自己实现它以实现您的案例。

只是为了让人们的生活更方便一点，我在几天前使用 Element 创建了一个simple responsive menu template。

希望这可以帮助你，获得一些想法。

【讨论】：

谢谢你的想法，我试试看！