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 相关文章推荐
jQuery使用手册之 事件处理
Mar 24 Javascript
jquery 简单的进度条实现代码
Mar 11 Javascript
parentElement,srcElement的使用小结
Jan 13 Javascript
Bootstrap3制作图片轮播效果
May 12 Javascript
Bootstrap插件全集
Jul 18 Javascript
JS中使用DOM来控制HTML元素
Jul 31 Javascript
微信小程序 欢迎界面开发的实例详解
Nov 30 Javascript
使用原生js+canvas实现模拟心电图的实例
Sep 20 Javascript
Angular使用cli生成自定义文件、组件的方法
Sep 04 Javascript
vue-router之nuxt动态路由设置的两种方法小结
Sep 26 Javascript
JS 实现获取验证码 倒计时功能
Oct 29 Javascript
浅谈关于JS下大批量异步任务按顺序执行解决方案一点思考
Jan 08 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
phpmyadmin中禁止外网使用的方法
2014/11/04 PHP
Symfony2在Nginx下的配置方法图文教程
2016/02/04 PHP
PHP实现基于mysqli的Model基类完整实例
2016/04/08 PHP
laravel学习教程之存取器
2016/07/30 PHP
php中html_entity_decode实现HTML实体转义
2018/06/13 PHP
JS实现下拉框的动态添加(附效果)
2013/04/03 Javascript
javascript贪吃蛇完整版(源码)
2013/12/09 Javascript
js实现省市联动效果的简单实例
2014/02/10 Javascript
在Ubuntu上安装最新版本的Node.js
2014/07/14 Javascript
AngularJS数据源的多种获取方式汇总
2016/02/02 Javascript
Node.js 数据加密传输浅析
2016/11/16 Javascript
Radio 单选JS动态添加的选项onchange事件无效的解决方法
2016/12/12 Javascript
jQuery按需加载轮播图(web前端性能优化)
2017/02/17 Javascript
Vue下滚动到页面底部无限加载数据的示例代码
2018/04/22 Javascript
Mac下通过brew安装指定版本的nodejs教程
2018/05/17 NodeJs
详解a标签添加onclick事件的几种方式
2019/03/29 Javascript
vue 实现把路由单独分离出来
2020/08/13 Javascript
在Django的视图中使用数据库查询的方法
2015/07/16 Python
python实现将汉字保存成文本的方法
2018/11/16 Python
对python以16进制打印字节数组的方法详解
2019/01/24 Python
简单了解Python matplotlib线的属性
2019/06/29 Python
Python实现UDP程序通信过程图解
2020/05/15 Python
python 利用opencv实现图像网络传输
2020/11/12 Python
html5 postMessage解决跨域、跨窗口消息传递方案
2016/12/20 HTML / CSS
中西医结合临床医学专业大学生自荐信
2013/09/28 职场文书
开会迟到检讨书
2014/02/03 职场文书
党员承诺书内容
2014/03/26 职场文书
合作意向协议书范本
2014/03/31 职场文书
信用卡结清证明怎么写
2014/09/13 职场文书
印刷技术专业自荐信
2014/09/18 职场文书
2015年爱国卫生月活动总结
2015/03/26 职场文书
结婚当天新郎保证书
2015/05/08 职场文书
给学校的建议书400字
2015/09/14 职场文书
Windows下用Nginx配置https服务器及反向代理的问题
2021/09/25 Servers
MySQL 数据类型详情
2021/11/11 MySQL
Python几种酷炫的进度条的方式
2022/04/11 Python