Vue 递归多级菜单的实例代码


Posted in Javascript onMay 05, 2019

考虑以下菜单数据:

[
 {
 name: "About",
 path: "/about",
 children: [
  {
  name: "About US",
  path: "/about/us"
  },
  {
  name: "About Comp",
  path: "/about/company",
  children: [
   {
   name: "About Comp A",
   path: "/about/company/A",
   children: [
    {
    name: "About Comp A 1",
    path: "/about/company/A/1"
    }
   ]
   }
  ]
  }
 ]
 },
 {
 name: "Link",
 path: "/link"
 }
];

需要实现的效果:

 Vue 递归多级菜单的实例代码

首先创建两个组件 Menu 和 MenuItem

// Menuitem

<template>
 <li class="item">
 <slot />
 </li>
</template>

MenuItem 是一个 li 标签和 slot 插槽,允许往里头加入各种元素

<!-- Menu -->

<template>
 <ul class="wrapper">
 <!-- 遍历 router 菜单数据 -->
 <menuitem :key="index" v-for="(item, index) in router">
  <!-- 对于没有 children 子菜单的 item -->
  <span class="item-title" v-if="!item.children">{{item.name}}</span>

  <!-- 对于有 children 子菜单的 item -->
  <template v-else>
  <span @click="handleToggleShow">{{item.name}}</span>
  <!-- 递归操作 -->
  <menu :router="item.children" v-if="toggleShow"></menu>
  </template>
 </menuitem>
 </ul>
</template>

<script>
 import MenuItem from "./MenuItem";

 export default {
 name: "Menu",
 props: ["router"], // Menu 组件接受一个 router 作为菜单数据
 components: { MenuItem },
 data() {
  return {
  toggleShow: false // toggle 状态
  };
 },
 methods: {
  handleToggleShow() {
  // 处理 toggle 状态的是否展开子菜单 handler
  this.toggleShow = !this.toggleShow;
  }
 }
 };
</script>

Menu 组件外层是一个 ul 标签,内部是 vFor 遍历生成的 MenuItem

这里有两种情况需要做判断,一种是 item 没有 children 属性,直接在 MenuItem 的插槽加入一个 span 元素渲染 item 的 title 即可;另一种是包含了 children 属性的 item 这种情况下,不仅需要渲染 title 还需要再次引入 Menu 做递归操作,将 item.children 作为路由传入到 router prop

最后在项目中使用:

<template>
 <div class="home">
 <menu :router="router"></menu>
 </div>
</template>

<script>
 import Menu from '@/components/Menu.vue'

 export default {
 name: 'home',
 components: {
  Menu
 },
 data () {
  return {
  router: // ... 省略菜单数据
  }
 }
 }
</script>

最后增加一些样式:

MenuItem:

<style lang="stylus" scoped>
 .item {
 margin: 10px 0;
 padding: 0 10px;
 border-radius: 4px;
 list-style: none;
 background: skyblue;
 color: #fff;
 }
</style>

Menu:

<style lang="stylus" scoped>
 .wrapper {
 cursor: pointer;

 .item-title {
  font-size: 16px;
 }
 }
</style>

Menu 中 ul 标签内的代码可以单独提取出来,Menu 作为 wrapper 使用,递归操作部分的代码也可以单独提取出来

总结

以上所述是小编给大家介绍的Vue 递归多级菜单的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
一个用javascript写的select支持上下键、首字母筛选以及回车取值的功能
Sep 09 Javascript
replace()方法查找字符使用示例
Oct 28 Javascript
JavaScript实现将UPC转换成ISBN的方法
May 26 Javascript
JS右下角广告窗口代码(可收缩、展开及关闭)
Sep 04 Javascript
js实现新浪微博首页效果
Oct 16 Javascript
基于JS实现的笛卡尔乘积之商品发布
May 13 Javascript
javascript日期比较方法实例分析
Jun 17 Javascript
js实现简单的计算器功能
Jan 16 Javascript
JS实现两周内自动登录功能
Mar 23 Javascript
微信小程序实现的贪吃蛇游戏【附源码下载】
Jan 03 Javascript
vue仿ios列表左划删除
Sep 26 Javascript
vue组件 keep-alive 和 transition 使用详解
Oct 11 Javascript
微信小程序自定义组件传值 页面和组件相互传数据操作示例
May 05 #Javascript
详解Vue调用手机相机和相册以及上传
May 05 #Javascript
原生JS实现动态添加新元素、删除元素方法
May 05 #Javascript
Angular实现svg和png图片下载实现
May 05 #Javascript
jQuery动态生成的元素绑定事件操作实例分析
May 04 #jQuery
node Buffer缓存区常见操作示例
May 04 #Javascript
JS实现checkbox互斥(单选)功能示例
May 04 #Javascript
You might like
基于qmail的完整WEBMAIL解决方案安装详解
2006/10/09 PHP
PHP简单系统查询模块代码打包下载
2008/06/07 PHP
PHP文件锁定写入实例解析
2014/07/14 PHP
详解PHP5.6.30与Apache2.4.x配置
2017/06/02 PHP
用javascript动态调整iframe高度的代码
2007/04/10 Javascript
用JTrackBar实现的模拟苹果风格的滚动条
2007/08/06 Javascript
js cookies实现简单统计访问次数
2009/11/24 Javascript
JS两种定义方式的区别、内部原理
2013/11/21 Javascript
jQuery中siblings()方法用法实例
2015/01/08 Javascript
JavaScript中constructor()方法的使用简介
2015/06/05 Javascript
浅谈Javascript实现继承的方法
2015/07/06 Javascript
微信JS SDK接入的几点注意事项(必看篇)
2017/06/23 Javascript
BootStrap 页签切换失效的解决方法
2017/08/17 Javascript
解决vue单页路由跳转后scrollTop的问题
2018/09/03 Javascript
ES6基础之 Promise 对象用法实例详解
2019/08/22 Javascript
vue中使用vee-validator完成表单校验方案
2019/11/01 Javascript
js实现旋转的星空效果
2019/11/01 Javascript
JS实现前端路由功能示例【原生路由】
2020/05/29 Javascript
详解微信小程序动画Animation执行过程
2020/09/23 Javascript
Python中使用ConfigParser解析ini配置文件实例
2014/08/30 Python
Python爬虫模拟登录带验证码网站
2016/01/22 Python
TensorFlow实现Logistic回归
2018/09/07 Python
pytorch中获取模型input/output shape实例
2019/12/30 Python
python 解决Windows平台上路径有空格的问题
2020/11/10 Python
CSS3图片旋转特效(360/60/-360度)
2013/10/10 HTML / CSS
青年安全生产示范岗事迹材料
2014/05/04 职场文书
任命书模板
2014/06/04 职场文书
12.4法制宣传日活动总结
2014/08/26 职场文书
市场调研项目授权委托书范本
2014/10/04 职场文书
县委党的群众路线教育实践活动工作情况报告
2014/10/25 职场文书
优秀班主任申报材料
2014/12/16 职场文书
现场施工员岗位职责
2015/04/11 职场文书
Django cookie和session的应用场景及如何使用
2021/04/29 Python
MySQL连接查询你真的学会了吗?
2021/06/02 MySQL
5行Python代码实现一键批量扣图
2021/06/29 Python
Golang 实现WebSockets
2022/04/24 Golang