gpt4 book ai didi

responsive-design - NavMenu 可以在 element-ui 中响应吗?

转载 作者:搜寻专家 更新时间:2023-10-30 22:10:49 25 4
gpt4 key购买 nike

我正在尝试基于 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" 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>

最佳答案

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

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

为了方便人们的生活,我创造了一个simple responsive menu template几天前使用 Element。

希望这对你有所帮助,得到一些想法。

关于responsive-design - NavMenu 可以在 element-ui 中响应吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48306392/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com