vue实现侧边导航栏
<div class="sidebar">
<el-menu
class="sidebar-el-menu"
:default-active="onRoutes"
:collapse="collapse"
background-color="#324157"
text-color="#bfcbd9"
active-text-color="#20a0ff"
unique-opened
router
>
<template v-for="item in items" :v-if="item.isShow===1">
<template v-if="item.subs">
<el-submenu :index="item.index" :key="item.index">
<template slot="title">
<i :class="item.icon"></i>
<!-- <i class="iconfont icon-renwu"></i> -->
<span slot="title">{{ item.title }}</span>
</template>
<template v-for="subItem in item.subs">
<!--<el-submenu v-if="subItem.subs" :index="subItem.index" :key="subItem.index">-->
<!--<template slot="title">{{ subItem.title }}</template>-->
<!--<el-menu-item v-for="(threeItem,i) in subItem.subs" :key="i" :index="threeItem.index">-->
<!--{{ threeItem.title }}-->
<!--</el-menu-item>-->
<!--</el-submenu>-->
<el-menu-item
v-if="subItem.isShow===1"
:index="subItem.index"
:key="subItem.index"
><i class="iconfont icon-admin_dian"></i>{{ subItem.title }}</el-menu-item>
</template>
</el-submenu>
</template>
<template v-else>
<el-menu-item :index="item.index" :key="item.index">
<i :class="item.icon"></i>
<span slot="title">{{ item.title }}</span>
</el-menu-item>
</template>
</template>
</el-menu>
</div>
JavaScript代码
beforeCreate: function() {
//这里出现了生命周期钩子函数,如果是created就无效
//对于created和mounted的区别,总结就是created的dom还没被vue的dom替换,其他都是一样的
let self = this;
let leftMenu = [ ];
this.postRequest("admin/leftMenu", {
token: ""
}).then(function(response) {
for (let num of response.data.data) {
let menuItem = {};
menuItem.subs = [];
menuItem.index = num.menuName;
menuItem.title = num.menuNameCn;
menuItem.icon = `iconfont icon-${num.menuName}`;
menuItem.isShow = num.isShow;
if (num.childMenu !== null) {
for (let subNum of num.childMenu) {
let subMenu = {};
subMenu.index = subNum.menuName;
subMenu.isShow = subNum.isShow;
subMenu.title = subNum.menuNameCn; //关于对象数组的遍历获取,肯定有更便捷的方法……
menuItem.subs.push(subMenu); //这里是转换数据格式而不是遍历判断,模板中判断了一次有没有二三级菜单,JS中也需要,来转换数据格式
}
}
leftMenu.push(menuItem);
}
self.items = leftMenu.concat(self.items);
});
},
data() {
return {
collapse: false,
// items:[]
items: [],
};
},
computed: {
onRoutes() {
return this.$route.path.replace("/", "");
}
},
created() {
// 通过 Event Bus 进行组件间通信,来折叠侧边栏
bus.$on("collapse", msg => {
this.collapse = msg;
});
}
};
可以同过event bus进行侧边栏的折叠效果
vue实现侧边导航栏的更多相关文章
- Android 新兴的UI模式——侧边导航栏【转】
侧边导航栏也就是大家熟知的SliddingMenu,英文也叫Fly-In App Menu.Side Navigation等.当然谷歌现在已经推出类似这个效果的组件--Navigation Drawe ...
- 【源码分享】jquery+css实现侧边导航栏
jquery+css实现侧边导航栏 最近做项目的时候,突然想用一个侧边导航栏,网上找了几个插件,有的太丑而且不太符合我的预期.与其修改别人的代码,不如自己来写一个了.废话不多说先上图,感兴趣的请继续看 ...
- [置顶]
bootstrap自定义样式-bootstrap侧边导航栏的实现
前言 bootstrap自带的响应式导航栏是向下滑动的,有时满足不了个性化的需求,需要做一个类似于android drawerLayout 侧滑的菜单,这就是我要实现的bootstrap自定义侧滑菜单 ...
- 【机器学习实践】Jupyter Notebook安装 侧边导航栏功能 操作及其他常用扩展功能介绍
安装过程: 1. 首先我们引入jupyter_contrib_nbextension这个第三方库. 2. 在Anaconda Promot中输入命令: pip install jupyter_con ...
- html+css写出响应式侧边导航栏
html部分:先写用div画好六个导航的卡片,再利用css添加响应效果 <div class='card-holder'> <div class='card-wrapper'> ...
- jQuery实现侧边导航栏效果
效果图: 效果体验:http://keleyi.com/keleyi/phtml/jqmenu/2.htm 以下是完整代码: <!DOCTYPE html> <html> &l ...
- Vue 实现左边导航栏且右边显示具体内容(element-ui)
最终效果图: 现在开始进入正题: 1.安装element-ui npm i element-ui -S CDN 目前可以通过 unpkg.com/element-ui 获取到最新版本的资源,在页面上引 ...
- 使用bootstrap3.0搭建一个具有自定义风格的侧边导航栏
由于工作变动,新的项目组,可能会涉及到更多的类似于后台管理系统这一类的项目,而且开发可能更加偏向于传统型的开发,希望今后能够在新的项目中能够用得上vuejs吧! 接手项目的时候,就是一个后台管理系统, ...
- iOS开发-仿大众点评iPad侧边导航栏
昨天其实已经写了一篇侧边栏的文章,不过感觉还不是很清晰,这篇文章算是补充吧,iPad上看了大众点评的侧边栏,基本上百分之九十类似,具体效果可参考下图: 对比昨天主要做了两个修改,一个是图片和文字的显示 ...
随机推荐
- C++ 内联(inline)函数
目录 内联函数的使用方法 内联函数的使用规则 使用inline的时机 inline函数与宏函数的差异 inline是C++关键字,在函数声明或定义中,函数返回类型前加上关键字inline,即可以把函数 ...
- 2020-04-29:现在你有个秒杀抢购的app,用户不断大量增加,技术层面,你要怎么做
2020-04-29:现在你有个秒杀抢购的app,用户不断大量增加,技术层面,你要怎么做,才能既满足用户需求,又能扛住压力,还能帮公司合理支出?福哥答案2020-04-29: 限流(杀部分用户祭天). ...
- CPU:别再拿我当搬砖工了!
数据搬运工 Hi,我是CPU一号车间的阿Q,有段日子没见面了. 还记得上回说到咱们厂里用上了DMA技术(太慢不能忍!CPU又拿硬盘和网卡开刀了!)之后,我们总算解放了,再也不用奔波于网卡.硬盘与内存之 ...
- Azure Application Gateway(二)对后端 VM 进行负载均衡
一,引言 上一节有讲到使用 Azure Application Gateway 为我们后端类型为 Web App 的 Demo 项目提供负载均衡,Azure Application Gateway 的 ...
- autotools使用
autotools制作makefile 下面以hello.c来说明生成makefile的过程. 基本步骤如下: 1)autoscan命令生成configure.scan文件,重命名configure. ...
- badger 一个高性能的LSM K/V store
原文:https://colobu.com/2017/10/11/badger-a-performant-k-v-store/ github地址:https://github.com/dgraph-i ...
- docker flannel网络部署和路由走向分析
1.flannel介绍 flannel是coreos开发的容器网络解决方案.flannel为每个host分配一个subnet,容器从此subnet中分配ip.这些ip可以在host间路由,容器间无需n ...
- shell 三剑客之 grep
grep 的全称是 Globally search a Regular Expression and Print,是一种强大的文本搜索工具,它能使用特定模式匹配(包括正则表达式)搜索文本,并默认输出匹 ...
- 2、Entity Framework Core 3.1入门教程-创建数据库和迁移
本文章是根据 微软MVP solenovex(杨旭)老师的视频教程编写而来,再加上自己的一些理解. 视频教程地址:https://www.bilibili.com/video/BV1xa4y1v7rR ...
- C#串口通讯,复制粘贴就可用,仅仅介绍怎样最快的搭建一个串口通讯,异常拦截等等需要自己加上
using System; using System.Collections.Generic; using System.IO.Ports; using System.Text; //串口通讯类 pu ...