用 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 相关文章推荐
Mootools 1.2教程 类(一)
Sep 15 Javascript
JS实现淘宝幻灯片效果的实现方法
Mar 22 Javascript
JQuery查找DOM节点的方法
Jun 11 Javascript
jQuery增加与删除table列的方法
Mar 01 Javascript
Bootstrap图片轮播组件Carousel使用方法详解
Oct 20 Javascript
Centos7 中安装 Node.js v4.4.4
Nov 03 Javascript
EasyUI 中combotree 默认不能选择父节点的实现方法
Nov 07 Javascript
微信小程序 增、删、改、查操作实例详解
Jan 13 Javascript
Vue表单验证插件的制作过程
Apr 01 Javascript
Taro集成Redux快速上手的方法示例
Jun 21 Javascript
Vue一个案例引发的递归组件的使用详解
Nov 15 Javascript
Vue指令之 v-cloak、v-text、v-html实例详解
Aug 08 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
PHP树的代码,可以嵌套任意层
2006/10/09 PHP
附件名前加网站名
2008/03/23 PHP
PHP基础知识介绍
2013/09/17 PHP
php官方微信接口大全(微信支付、微信红包、微信摇一摇、微信小店)
2015/12/21 PHP
PHP邮箱验证示例教程
2016/06/01 PHP
学习JS面向对象成果 借国庆发布个最新作品与大家交流
2009/10/03 Javascript
jquery监控数据是否变化(修正版)
2011/04/12 Javascript
JQuery学习笔录 简单的JQuery
2012/04/09 Javascript
JavaScript高级程序设计(第3版)学习笔记3 js简单数据类型
2012/10/11 Javascript
把jquery 的dialog和ztree结合实现步骤
2013/08/02 Javascript
window.open 以post方式传递参数示例代码
2014/02/27 Javascript
javascript写的异步加载js文件函数(支持数组传参)
2014/06/07 Javascript
不同编码的页面表单数据乱码问题解决方法
2015/02/15 Javascript
jquery实现列表上下移动功能
2016/02/25 Javascript
JQuery 两种方法解决刚创建的元素遍历不到的问题
2016/04/13 Javascript
jQuery is not defined 错误原因与解决方法小结
2017/03/19 Javascript
使用Dropzone.js上传的示例代码
2017/10/10 Javascript
javascript中floor使用方法总结
2019/02/02 Javascript
JS解惑之Object中的key是有序的么
2019/05/06 Javascript
jQuery事件委托代码实践详解
2019/06/21 jQuery
python实现挑选出来100以内的质数
2015/03/24 Python
Python编程之string相关操作实例详解
2017/07/22 Python
python获取当前目录路径和上级路径的实例
2018/04/26 Python
Python socket模块ftp传输文件过程解析
2019/11/05 Python
解决pycharm中的run和debug失效无法点击运行
2020/06/09 Python
Python字典fromkeys()方法使用代码实例
2020/07/20 Python
年度考核评语
2014/01/19 职场文书
俞敏洪北大演讲稿
2014/05/22 职场文书
项目投资合作意向书
2014/07/29 职场文书
创新社会管理心得体会
2014/09/12 职场文书
搞笑的婚礼主持词
2015/06/29 职场文书
百年校庆感言
2015/08/01 职场文书
MySQL REVOKE实现删除用户权限
2021/06/18 MySQL
MySQL高速缓存启动方法及参数详解(query_cache_size)
2021/07/01 MySQL
mybatis 获取无数据的字段不显示的问题
2021/07/15 Java/Android
zabbix 代理服务器的部署与 zabbix-snmp 监控问题
2022/07/15 Servers