element-ui 实现响应式导航栏的示例代码

通过简单的判断即可在窗口宽度变化时，将菜单里的内容放入预先设置的正常菜单或者当宽度小于600时显示的右侧下拉菜单,附上html部分代码：

<el-menu text-color="#2d2d2d" id="navid" class="nav" mode="horizontal" @select="handleSelect">
 <el-menu-item class="logo" index="0" route="/home">
 <img class="logoimg" src="../assets/img/logo.png" alt="logo" />
 </el-menu-item>
 <el-menu-item
 :key="key"
 v-for="(item,key) in leftNavItems"
 :index="item.index"
 :route="item.activeIndex"
 >{{item.name}}</el-menu-item>
 <el-submenu
 style="float:right;"
 class="right-item"
 v-if="Object.keys(rightNavItems).length === 0?false:true"
 index="10"
 >
 <template slot="title">
  <i class="el-icon-s-fold" style="font-size:28px;color:#2d2d2d;"></i>
 </template>
 <el-menu-item
  :key="key"
  v-for="(item,key) in rightNavItems"
  :index="item.index"
  :route="item.activeIndex"
 >{{item.name}}</el-menu-item>
 </el-submenu>
</el-menu>

总结

总的来说，一个丐版就算完成了，这里只提供了一种可能的思路，如需实践可以增加更多判断规则及功能。（主要是已经转用Vuetify啦~）

到此这篇关于element-ui 实现响应式导航栏的示例代码的文章就介绍到这了,更多相关element 响应式导航栏内容请搜索软件开发网以前的文章或继续浏览下面的相关文章希望大家以后多多支持软件开发网！