vue+iview框架实现左侧动态菜单功能的示例代码


Posted in Javascript onJuly 23, 2020

最近在使用vue-cli3配合iview框架搭建新的项目中用到了iview中的menu菜单,按照官网写法固定不太好,因为一般项目都是从后端动态获取菜单列表,所以我们需要将官网代码稍作修改,代码如下:

注意事项:

【1】菜单高亮部分动态绑定路由跳转的页面

Menu组件中有一个active-name反映的是当前高亮区域,因此可以动态的绑定active-name来实现高亮显示。前提是需要将MenuItem绑定的name也设置成页面路由的name

vue+iview框架实现左侧动态菜单功能的示例代码

【2】动态获取菜单数据,需要更新菜单

this.$nextTick(() => {
 	this.$refs.side_menu.updateOpened()
  	this.$refs.side_menu.updateActiveName()
  });

代码:

<template>
 <div class="leftNav">
 <Menu ref="side_menu" theme="dark" accordion v-for="(menuItem, menuIndex) in menuList" :key="menuIndex" :active-name="$route.name">
 
  <!-- 展开没有子菜单 -->
  <MenuItem v-if="!menuItem.children || menuItem.children.length==0" :key="menuIndex" :name="menuItem.to" :to="menuItem.to">
  <Icon :type="menuItem.icon" />
  <span>{{ menuItem.name }}</span>
  </MenuItem>
 
  <!-- 展开有子菜单 -->
  <Submenu v-else :name="menuIndex">
   <template slot="title">
    <Icon :type="menuItem.icon" />
    <span>{{menuItem.name}}</span>
   </template>
   <MenuItem v-for="(item, index) in menuItem.children" :key="index" :name="item.to" :to="item.to">{{item.name}}</MenuItem>
  </Submenu>
 </Menu>
 </div> 
   
</template>
<script>
export default {
 data() {
 return {
  menuList: [
  {
   name: "首页",
   to: "home",
   icon: "ios-archive-outline"
  },
  {
   name: "关于",
   to: "about",
   icon: "ios-create-outline"
  },
  {
   name: "菜单分类1",
   icon: "md-person",
   children: [
   {
    name: "用户",
    to: "user"
   }
   ]
  },
  {
   name: "菜单分类2",
   icon: "ios-copy",
   children: [
   {
    name: "测试",
    to: "test"
   }
   ]
  }
  ]
 };
 },
 created() {
 // 数据我先写静态的,可在初始化的时候通过请求,将数据指向menuList。
 // ajax成功回调后 this.menuList = response.data;
 // 别忘记更新菜单
 // this.$nextTick(() => {
 //	this.$refs.side_menu.updateOpened()
 //	this.$refs.side_menu.updateActiveName()
 //});
 }
};
</script>
<style lang="scss" scoped>
/deep/
 .ivu-menu-dark.ivu-menu-vertical
 .ivu-menu-item-active:not(.ivu-menu-submenu) {
 border-right: none;
 color: #fff;
 background: #2d8cf0 !important;
}
</style>

效果图:

vue+iview框架实现左侧动态菜单功能的示例代码

到此这篇关于vue+iview框架实现左侧动态菜单的文章就介绍到这了,更多相关vue iview左侧动态菜单内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
JS鼠标事件大全 推荐收藏
Nov 01 Javascript
Jquery如何实现点击时高亮显示代码
Jan 22 Javascript
排序算法的javascript实现与讲解(99js手记)
Sep 28 Javascript
jquery实现焦点图片随机切换效果的方法
Mar 12 Javascript
Javascript URI 解析介绍
Mar 15 Javascript
AngularJS中的$watch(),$digest()和$apply()区分
Apr 04 Javascript
原生js开发的日历插件
Feb 04 Javascript
详解Vue-cli中的静态资源管理(src/assets和static/的区别)
Jun 19 Javascript
jquery拖拽自动排序插件使用方法详解
Jul 20 jQuery
angular4中引入echarts的方法示例
Jan 29 Javascript
Vue.js计算机属性computed和methods方法详解
Oct 12 Javascript
在vue项目中利用popstate处理页面返回的操作介绍
Aug 06 Javascript
JS前后端实现身份证号验证代码解析
Jul 23 #Javascript
vue实现用户长时间不操作自动退出登录功能的实现代码
Jul 23 #Javascript
在vue中封装的弹窗组件使用队列模式实现方法
Jul 23 #Javascript
基于JS实现计算24点算法代码实例解析
Jul 23 #Javascript
javascript递归函数定义和用法示例分析
Jul 22 #Javascript
简单了解vue 插值表达式Mustache
Jul 22 #Javascript
详解node.js 事件循环
Jul 22 #Javascript
You might like
通过对服务器端特性的配置加强php的安全
2006/10/09 PHP
PHP运行出现Notice : Use of undefined constant 的完美解决方案分享
2012/03/05 PHP
详解PHP中的 input属性(隐藏 只读 限制)
2017/08/14 PHP
基于jquery的Repeater实现代码
2010/07/17 Javascript
javascript按位非运算符的使用方法
2013/11/14 Javascript
使用javascript实现有效时间的控制,并显示将要过期的时间
2014/01/02 Javascript
JavaScript 实现打印,打印预览,打印设置
2014/12/30 Javascript
微信小程序 使用picker封装省市区三级联动实例代码
2016/10/28 Javascript
半个小时学json(json传递示例)
2016/12/25 Javascript
基于jQuery实现的打字机效果
2017/01/16 Javascript
Bootstrap超大屏幕的实现代码
2017/03/22 Javascript
jQuery.ajax向后台传递数组问题的解决方法
2017/05/12 jQuery
5分钟打造简易高效的webpack常用配置
2017/07/04 Javascript
JavaScript实现异步图像上传功能
2018/07/12 Javascript
微信小程序传值以及获取值方法的详解
2019/04/29 Javascript
使用vue自定义指令开发表单验证插件validate.js
2019/05/23 Javascript
小程序实现短信登录倒计时
2019/07/12 Javascript
js实现ajax的用户简单登入功能
2020/06/18 Javascript
[15:46]教你分分钟做大人——沙王
2015/03/11 DOTA
布同 统计英文单词的个数的python代码
2011/03/13 Python
简单讲解Python中的闭包
2015/08/11 Python
python+matplotlib绘制饼图散点图实例代码
2018/01/20 Python
Linux下远程连接Jupyter+pyspark部署教程
2019/06/21 Python
Python如何使用函数做字典的值
2019/11/30 Python
使用python去除图片白色像素的实例
2019/12/12 Python
浅谈django 模型类使用save()方法的好处与注意事项
2020/03/28 Python
美国礼品卡交易网站:Cardpool
2018/08/27 全球购物
应届大学生简历中的自我评价
2014/01/15 职场文书
集中采购方案
2014/06/10 职场文书
道路施工安全责任书
2014/07/24 职场文书
升学宴演讲稿
2014/09/01 职场文书
就业协议书怎么填
2014/09/15 职场文书
环境卫生工作汇报材料
2014/10/28 职场文书
2015年安全月活动总结
2015/03/26 职场文书
退伍军人感言
2015/08/01 职场文书
JavaScript 事件捕获冒泡与捕获详情
2021/11/11 Javascript