用 Vue.js 递归组件实现可折叠的树形菜单(demo)


Posted in Javascript onDecember 25, 2017

用 Vue.js 递归组件实现可折叠的树形菜单(demo) 

在Vue.js中一个递归组件调用的是其本身,如:

Vue.component('recursive-component', {
  template: `<!--Invoking myself!-->
       <recursive-component></recursive-component>`
 });

递归组件常用于在blog上显示注释、嵌套的菜单,或者基本上是父和子相同的类型,尽管具体内容不同。例如:

用 Vue.js 递归组件实现可折叠的树形菜单(demo) 

现在给您演示一下如何有效地使用递归组件,我将通过建立一个可扩展/收缩的树形菜单的来一步步进行。

数据结构

一个树状UI的递归组件将是一些递归数据结构的可视化表达。在本教程中,我们将使用树状结构,其中每个节点都是一个对象:

一个 label 属性。

如果它有子节点,一个 nodes 属性,则它是一个或多个节点的数组属性。

与所有树结构一样,它必须有一个根节点,但可以无限深。

let tree = {
  label: 'root',
  nodes: [
   {
    label: 'item1',
    nodes: [
     {
      label: 'item1.1'
     },
     {
      label: 'item1.2',
      nodes: [
       {
        label: 'item1.2.1'
       }
      ]
     }
    ]
   }, 
   {
    label: 'item2' 
   }
  ]
 }

递归组件

让我们做一个递归组件来显示我们的称为 TreeMenu 的数据结构。它只显示当前节点的标签,并调用自己来显示任何子节点。文件名:TreeMenu.vue,内容如下:

<template>
  <div class="tree-menu">
   <div>{{ label }}</div>
   <tree-menu 
    v-for="node in nodes" 
    :nodes="node.nodes" 
    :label="node.label"
   >
   </tree-menu>
  </div>
 </template>
 <script>
  export default { 
   props: [ 'label', 'nodes' ],
   name: 'tree-menu'
  }
 </script>

如果你使用一个组件递归,必须先给 Vue.component 做一个全局的定义,或者,给它一个 name 属性。否则,任何子组件将无法进一步调用它,你会得到一个不确定的“ undefined component error ”的错误提示。

基本事件

与任何递归函数一样,你需要一个基本事件来结束递归,否则渲染将无限期地继续下去,最终会导致堆栈溢出。

在树菜单中,当我们到达一个没有子节点的节点的时候,我们希望停止递归。你能通过 v-if 做到这一功能,但我们选择使用 v-for 将隐式地为我们实现它;如果 nodes 数组没有任何进一步的定义 tree-menu 组件将被调用。 template.vue 文件如下:

<template>
  <div class="tree-menu">
   ...
   <!--If `nodes` is undefined this will not render-->
   <tree-menu v-for="node in nodes"></tree-menu>
 </template>

使用用法

我们现在如何使用这个组件?首先,我们声明一个 Vue 实例,具有一个数据结构包括 data 属性和定义过的 treemenu 组件。 app.js 文件如下:

import TreeMenu from './TreeMenu.vue'
 let tree = {
  ...
 }
 new Vue({
  el: '#app',
  data: {
   tree
  },
  components: {
   TreeMenu
  }
 })

请记住,我们的数据结构有一个根节点。我们在主模板开始递归调用 TreeMenu 组件,使用根 nodes 属性来props:

<div id="app">
  <tree-menu :label="tree.label" :nodes="tree.nodes"></tree-menu>
 </div>

用 Vue.js 递归组件实现可折叠的树形菜单(demo) 

下面是它目前的样子:

正确的姿势

在视觉上识别子组件的“深度”是很好的,这样用户就可以从UI中获得数据结构的感觉。让我们缩进每一层的子节点来实现这个目标。

用 Vue.js 递归组件实现可折叠的树形菜单(demo) 

这是通过增加一个 depth prop定义,通过 TreeMenu 来实现。我们将使用这个值动态地将内联样式与转换绑定在一起:将使用 transform: translate 的CSS规则为每个节点的标签,从而创建缩进。 template.vue 修改如下**:**

<template>
  <div class="tree-menu">
   <div :style="indent">{{ label }}</div>
   <tree-menu 
    v-for="node in nodes" 
    :nodes="node.nodes" 
    :label="node.label"
    :depth="depth + 1"
   >
   </tree-menu>
  </div>
 </template>
 <script>
  export default { 
   props: [ 'label', 'nodes', 'depth' ],
   name: 'tree-menu',
   computed: {
    indent() {
     return { transform: `translate(${this.depth * 50}px)` }
    }
   }
  }
 </script>

depth属性在主模板中从零开始。在上面的组件模板中,你可以看到每次传递到任何子节点时这个值都会递增。

<div id="app">
  <tree-menu 
   :label="tree.label" 
   :nodes="tree.nodes"
   :depth="0"
  ></tree-menu>
 </div>

注意:记得 v-bind depth值以确保它是一个JavaScript数字类型而不是字符串。

展开/收起

由于递归数据结构可能很大,所以显示它们的一个很好的UI技巧是隐藏除根节点以外的所有节点,以便用户可以根据需要展开或收起节点。

为此,我们将增加一个局部属性 showChildren 。如果他的值为False,子节点将不会被渲染。此值应通过点击节点切换,所以我们需要使用一个单击事件的监听器方法 toggleChildren 来进行管理。 template.vue 文件修改如下**:**

<template>
  <div class="tree-menu">
   <div :style="indent" @click="toggleChildren">{{ label }}</div>
   <tree-menu 
    v-if="showChildren"
    v-for="node in nodes" 
    :nodes="node.nodes" 
    :label="node.label"
    :depth="depth + 1"
   >
   </tree-menu>
  </div>
 </template>
 <script>
  export default { 
   props: [ 'label', 'nodes', 'depth' ],
   data() {
    return { showChildren: false }
   },
   name: 'tree-menu',
   computed: {
    indent() {
     return { transform: `translate(${this.depth * 50}px)` }
    }
   },
   methods: {
    toggleChildren() {
     this.showChildren = !this.showChildren;
    }
   }
  }
 </script>

总结

这样,我们就有了一个工作树菜单。用来画龙点睛的一个方法是,你可以添加一个加号/减号图标,这样可以使UI的显示更加明显。我还增加了的很好的字体和计算性能在原来 showChildren 的基础上。

去CodePen( https://codepen.io/anthonygore/pen/PJKNqa)可以看看我是如何实现它的。

用 Vue.js 递归组件实现可折叠的树形菜单(demo) 

Javascript 相关文章推荐
由document.body和document.documentElement想到的
Apr 13 Javascript
让mayfish支持mysqli数据库驱动的实现方法
May 22 Javascript
jQuery 关于伪类选择符的使用说明
Apr 24 Javascript
jquery ajax,ashx,json的用法总结
Feb 12 Javascript
jquery基础教程之数组使用详解
Mar 10 Javascript
javaScript实现可缩放的显示区效果代码
Oct 26 Javascript
RGB和YUV 多媒体编程基础详细介绍
Nov 04 Javascript
JavaScript实现瀑布流以及加载效果
Feb 11 Javascript
CodeMirror js代码加亮使用总结
Mar 25 Javascript
vue.js 微信支付前端代码分享
Feb 10 Javascript
js字符串处理之绝妙的代码
Apr 05 Javascript
Vue文本模糊匹配功能如何实现
Jul 30 Javascript
详解vue-cli之webpack3构建全面提速优化
Dec 25 #Javascript
jQuery EasyUI 选项卡面板tabs的使用实例讲解
Dec 25 #jQuery
zTree树形菜单交互选项卡效果的实现方法
Dec 25 #Javascript
jQuery EasyUI 折叠面板accordion的使用实例(分享)
Dec 25 #jQuery
Vue.js递归组件构建树形菜单
Dec 24 #Javascript
深入浅析JSONAPI在PHP中的应用
Dec 24 #Javascript
Parcel.js + Vue 2.x 极速零配置打包体验教程
Dec 24 #Javascript
You might like
PL-880隐藏功能
2021/03/01 无线电
PHP 作用域解析运算符(::)
2010/07/27 PHP
解放web程序员的输入验证
2006/10/06 Javascript
uploadify在Firefox下丢失session问题的解决方法
2013/08/07 Javascript
JavaScript实现页面跳转的方式汇总
2016/05/16 Javascript
Bootstrap Img 图片样式(推荐)
2016/12/13 Javascript
vue生成token保存在客户端localStorage中的方法
2017/10/25 Javascript
vue中element-ui表格缩略图悬浮放大功能的实例代码
2018/06/26 Javascript
JavaScript实现的文本框placeholder提示文字功能示例
2018/07/25 Javascript
vue项目设置scrollTop不起作用(总结)
2018/12/21 Javascript
每周一练 之 数据结构与算法(Stack)
2019/04/16 Javascript
小程序实现新用户判断并跳转激活的方法
2019/05/20 Javascript
JavaScript模块管理的简单实现方式详解
2019/06/15 Javascript
手把手教你 CKEDITOR 4 扩展插件制作
2019/06/18 Javascript
解决vue更新路由router-view复用组件内容不刷新的问题
2019/11/04 Javascript
[01:13:08]2018DOTA2亚洲邀请赛4.6 淘汰赛 mineski vs LGD 第二场
2018/04/10 DOTA
详解Python 2.6 升级至 Python 2.7 的实践心得
2017/04/27 Python
Python求两个圆的交点坐标或三个圆的交点坐标方法
2018/11/07 Python
pyqt5 实现在别的窗口弹出进度条
2019/06/18 Python
解决pycharm下pyuic工具使用的问题
2020/04/08 Python
Python Selenium截图功能实现代码
2020/04/26 Python
python 监控logcat关键字功能
2020/09/04 Python
小天鹅官方商城:LittleSwan
2017/06/16 全球购物
波兰在线运动商店:YesSport
2020/07/23 全球购物
中科软笔试题和面试题
2014/10/07 面试题
传播学专业毕业生自荐信
2013/11/04 职场文书
汽车技术服务与营销专业推荐信
2013/11/29 职场文书
劲霸男装广告词改编版
2014/03/21 职场文书
施工安全汇报材料
2014/08/17 职场文书
国家税务局干部作风整顿整改措施
2014/09/18 职场文书
房屋鉴定委托书范本
2014/09/23 职场文书
目标责任书格式范文
2015/05/11 职场文书
单位证明范文
2015/06/18 职场文书
PHP实现创建以太坊钱包转账等功能
2021/04/21 PHP
用Python将GIF动图分解成多张静态图片
2021/06/11 Python
http通过StreamingHttpResponse完成连续的数据传输长链接方式
2022/02/12 Python