vue.js实现二级菜单效果


Posted in Javascript onOctober 19, 2019

本文实例为大家分享了vue.js实现二级菜单效果的具体代码,供大家参考,具体内容如下

主要是对二级菜单和当前点击的处理:

点击导航时,如果有二级菜单,就切换二级菜单显示状态(显示或者关闭),如果没有二级菜单,就变色,表示页面处于当前位置,并且导航中最多只能有一个菜单变色。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>这是一个v-for的导航条</title>
 <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
 <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.min.js"></script>
 <link rel="stylesheet" href="nav.css" >
</head>
<body>
<div id="pages">
 <ul id="side-menu">
 <li class="menu-unit" v-for="menu in menus">
  <a id="menu-url" v-bind:href="menu.url" 
   v-bind:class="{ 'menu-active': menu.active && !menu.secondMenus}"
   v-on:click="showToggle(menu)"
  >
  <i v-bind:class="menu.icon"></i>
  <span>{{ menu.text }}</span>
  <i v-if="menu.downIcon" v-bind:class="menu.downIcon"></i>
  </a>
  <ul id="side-second-menu" v-if="menu.secondMenus && menu.active">
  <li v-for="secMenu in menu.secondMenus" v-on:click="showToggle(menu, secMenu)">
   <a v-bind:href="secMenu.url" rel="external nofollow" 
    v-bind:class="{ 'menu-active': secMenu.active }">
   <span>{{ secMenu.text }}</span>
   </a>
  </li>
  </ul>
 </li>
 </ul>
</div>

<script>
 var vm = new Vue({
 el: '#side-menu',
 data: {
  menus: [
  {
   text: '首页',
   icon: 'glyphicon glyphicon-apple',
   active: false
  },
  {
   text: '文档',
   // url: 'https://www.baidu.com/',
   icon: 'glyphicon glyphicon-book',
   active: false
  },
  {
   text: '引导页',
   // url: 'https://www.baidu.com/',
   icon: 'glyphicon glyphicon-send',
   active: false
  },
  {
   text: '权限测试页',
   icon: 'glyphicon glyphicon-lock',
   downIcon: 'glyphicon glyphicon-menu-down',
   active: false,
   secondMenus: [
   {text: '页面权限', url: '#', active: false},
   {text: '权限指令', url: '#', active: false},
   ]
  },
  {
   text: '图标',
   icon: 'glyphicon glyphicon-pawn',
   active: false,
   // url: 'https://www.baidu.com/'
  },
  ]
 },
 methods: {
  showToggle: function (menu, secMenu) {
  // 如果传入了二级菜单
  if (secMenu) {
   secMenu.active = true;
   // 更新menus数据
   this.refreshMenuTree(this.menus, menu, secMenu);
  } else {
   if (menu.secondMenus) {
   menu.active = !menu.active;
   } else {
   menu.active = true;
   // 更新menus数据
   this.refreshMenuTree(this.menus, menu, secMenu);
   }
  }
  },

  /**
  * 解释:对于菜单栏active置为true的逻辑,可以简化为,我点击谁谁就active,其他的菜单项active都变为
  * false。但特殊情况为二级菜单,二级菜单点击后自己的active变为true,但父菜单项的active不能变false。
  * 所以问题简化为:
  * 1. 点击的菜单项的active变为true
  * 2. 遍历整个菜单的所有数据项,不等于我点击的这个菜单项的active都变为false
  * (但二级菜单要考虑其父菜单项不能变false,即除了我点击的这个和我的父菜单项外都变false)
  *
  * 关键问题即:用树的遍历解决菜单所有数据项的遍历和active取反,即对于被遍历的每个菜单项来说,
  * 只要不等于我传入的一级菜单和二级菜单,active就变成false
  *
  * 整体逻辑即:menus中的数据项,进行遍历,如果不等于传入的menu或者secMenu则直接置为false
  * @param menus 包含menu数据项的数组,如一级菜单数组,二级菜单数组
  * @param menu 应该激活的一级菜单项
  * @param secMenu 应该激活的二级菜单项
  */
  refreshMenuTree(menus, menu, secMenu) {
  // 开始遍历
  menus.forEach(function (item) {
   // 如果菜单项不等于传入的一级菜单项或二级菜单项,则active置为false
   if (!(item === menu || item === secMenu || (item.secondMenus && item.active))) {
   item.active = false;
   }

   // 如果菜单项包含二级菜单列表,则遍历此列表
   if (item.secondMenus) {
   this.refreshMenuTree(item.secondMenus, menu, secMenu);
   }
   // 使用.bind(this)给函数的this绑定为外层的作用域,要不然this.refreshMenuTree方法取不到
  }.bind(this));
  },

 }
 })
</script>

<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery,所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>

</body>
</html>

更多教程点击《Vue.js前端组件学习教程》,欢迎大家学习阅读。

关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript实现划词标记+划词搜索功能
Mar 06 Javascript
页面版文本框智能提示JS代码
Nov 20 Javascript
javascript基础知识大集锦(一) 推荐收藏
Jan 13 Javascript
JS 毫秒转时间示例代码
Sep 22 Javascript
jquery插件之定时查询待处理任务数量
May 01 Javascript
node.js超时timeout详解
Nov 26 Javascript
在for循环中length值是否需要缓存
Jul 27 Javascript
原生javascript上传图片带进度条【实例分享】
Apr 06 Javascript
百度地图去掉marker覆盖物或者去掉maker的label文字方法
Jan 26 Javascript
vue.js 2.*项目环境搭建、运行、打包发布的详细步骤
May 01 Javascript
JavaScript 作用域实例分析
Oct 02 Javascript
Jquery+javascript实现支付网页数字键盘
Dec 21 jQuery
vue实现多级菜单效果
Oct 19 #Javascript
vue.js实现三级菜单效果
Oct 19 #Javascript
vue.js实现只能输入数字的输入框
Oct 19 #Javascript
Vue数字输入框组件的使用方法
Oct 19 #Javascript
微信小程序实现禁止分享代码实例
Oct 19 #Javascript
Vue.js组件props数据验证实现详解
Oct 19 #Javascript
Vue.js组件使用props传递数据的方法
Oct 19 #Javascript
You might like
php Sql Server连接失败问题及解决办法
2009/08/07 PHP
Javascript调试工具(下载)
2007/01/09 Javascript
[Web]防止用户复制页面内容和另存页面的方法
2009/02/06 Javascript
浅析Prototype的模板类 Template
2011/12/07 Javascript
JavaScript位置与大小(1)之正确理解和运用与尺寸大小相关的DOM属性
2015/12/26 Javascript
vue+vuex+axio从后台获取数据存入vuex实现组件之间共享数据
2017/04/22 Javascript
解决Webpack 热部署检测不到文件变化的问题
2018/02/22 Javascript
微信小程序实时聊天WebSocket
2018/07/05 Javascript
基于vue.js组件实现分页效果
2018/12/29 Javascript
模块化react-router配置方法详解
2019/06/03 Javascript
[02:17]DOTA2亚洲邀请赛 RAVE战队出场宣传片
2015/02/07 DOTA
Python中replace方法实例分析
2014/08/20 Python
在arcgis使用python脚本进行字段计算时是如何解决中文问题的
2015/10/18 Python
python实现可以断点续传和并发的ftp程序
2016/09/13 Python
浅析Git版本控制器使用
2017/12/10 Python
NLTK 3.2.4 环境搭建教程
2018/09/19 Python
python中比较两个列表的实例方法
2019/07/04 Python
python实现ip代理池功能示例
2019/07/05 Python
Python使用qrcode二维码库生成二维码方法详解
2020/02/17 Python
Python实现敏感词过滤的4种方法
2020/09/12 Python
纯css3实现走马灯效果
2014/12/26 HTML / CSS
Farfetch巴西官网:奢侈品牌时尚购物平台
2020/10/19 全球购物
继承时候类的执行顺序问题,一般都是选择题,问你将会打印出什么?
2015/11/18 面试题
国际贸易个人求职信范文
2014/01/04 职场文书
本科毕业自我鉴定
2014/03/20 职场文书
十佳标兵事迹材料
2014/08/18 职场文书
ktv服务员岗位职责
2015/02/09 职场文书
基层医务人员三严三实心得体会
2016/01/05 职场文书
安全生产学习心得体会
2016/01/18 职场文书
2016年小学党支部创先争优活动总结
2016/04/05 职场文书
详解前端任务构建利器Gulp.js使用指南
2021/04/30 Javascript
Python OpenCV 图像平移的实现示例
2021/06/04 Python
刚学完怎么用Python实现定时任务,转头就跑去撩妹!
2021/06/05 Python
详解Vue中$props、$attrs和$listeners的使用方法
2022/02/18 Vue.js
openstack云计算keystone组件工作介绍
2022/04/20 Servers
JS前端可扩展的低代码UI框架Sunmao使用详解
2022/07/23 Javascript