element-ui中的NavMenu是否可以响应式?

10

我尝试基于vue.js和element-ui组件创建一个响应式单页面应用程序。它具有开箱即用的响应式布局,并且运行良好,但我无法理解如何使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" width="64px" 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个回答

16

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

如果您考虑构建响应式导航菜单,则需要自己实现以满足您的需求。

仅为了让人们的生活更加便利,我几天前使用 Element 创建了一个简单的响应式菜单模板

希望这能帮助您得到一些想法。


谢谢你的建议,我会试一试! - IDeveloper

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接