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