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 循环读取JSON数据的代码
Jul 17 Javascript
JavaScript判断textarea值是否为空并给出相应提示
Sep 04 Javascript
学习javascript的闭包,原型,和匿名函数之旅
Oct 18 Javascript
jQuery基于toggle实现click触发DIV的显示与隐藏问题分析
Jun 12 Javascript
JQuery对ASP.NET MVC数据进行更新删除
Jul 13 Javascript
根据输入邮箱号跳转到相应登录地址的解决方法
Dec 13 Javascript
详解JavaScript的闭包、IIFE、apply、函数与对象
Dec 21 Javascript
深入理解JavaScript继承的多种方式和优缺点
May 12 Javascript
React-Native 组件之 Modal的使用详解
Aug 08 Javascript
9种改善AngularJS性能的方法
Nov 28 Javascript
JS和Canvas实现图片的预览压缩和上传功能
Mar 30 Javascript
Vue+Mock.js模拟登录和表格的增删改查功能
Jul 26 Javascript
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分多步骤填写发布信息的简单方法实例代码
2012/09/23 PHP
php+xml编程之SimpleXML的应用实例
2015/01/24 PHP
反射调用private方法实践(php、java)
2015/12/21 PHP
详解jquery uploadify 上传文件
2013/11/09 Javascript
JavaScript 数组的深度复制解析
2016/11/02 Javascript
Bootstrap源码解读排版(1)
2016/12/23 Javascript
详解微信小程序Radio选中样式切换
2017/07/06 Javascript
Vue用v-for给src属性赋值的方法
2018/03/03 Javascript
VeeValidate在vue项目里表单校验应用案例
2018/05/09 Javascript
详解ES7 Decorator 入门解析
2019/02/18 Javascript
使用Promise封装小程序wx.request的实现方法
2019/11/13 Javascript
[06:21]2014DOTA2国际邀请赛 庆祝VG首阶段领跑;B叔为挣牛排半夜整理情报
2014/07/13 DOTA
python实现的一只从百度开始不断搜索的小爬虫
2013/08/13 Python
Python测试人员需要掌握的知识
2018/02/08 Python
python实现人脸识别经典算法(一) 特征脸法
2018/03/13 Python
python解压TAR文件至指定文件夹的实例
2019/06/10 Python
python3 动态模块导入与全局变量使用实例
2019/12/22 Python
浅谈pytorch卷积核大小的设置对全连接神经元的影响
2020/01/10 Python
win10安装tesserocr配置 Python使用tesserocr识别字母数字验证码
2020/01/16 Python
Pytorch之finetune使用详解
2020/01/18 Python
Virtualenv 搭建 Py项目运行环境的教程详解
2020/06/22 Python
Python图像识别+KNN求解数独的实现
2020/11/13 Python
Python 调用 ES、Solr、Phoenix的示例代码
2020/11/23 Python
详解python使用金山词霸的翻译功能(调试工具断点的使用)
2021/01/07 Python
使用html5实现表格实现标题合并的实例代码
2019/05/13 HTML / CSS
德国网上药房:Apotal
2017/04/04 全球购物
美国战术品牌:5.11 Tactical
2019/05/01 全球购物
Loreto Gallo英国:欧洲领先的在线药房
2021/01/21 全球购物
Linux开机引导的步骤是什么
2015/10/19 面试题
晨会主持词
2014/03/17 职场文书
数学系毕业生求职信
2014/05/29 职场文书
男性健康日的活动方案
2014/08/18 职场文书
婚前协议书标准版
2014/10/19 职场文书
2014年班长个人工作总结
2014/11/14 职场文书
解析Java异步之call future
2021/06/14 Java/Android
Spring Boot实现文件上传下载
2022/08/14 Java/Android