Vue组件tree实现树形菜单


Posted in Javascript onApril 13, 2017

vue 编写的树形菜单,小巧实用,支持vue1.0,vue2.0

v1.0 功能:

1.支持多级树目录
2.支持高亮点击的节点
3.支持展开点击节点
4.支持点击收缩节点时收缩所有子目录
5.支持自定义回调函数,点击节点时回调,参数为节点信息

用法:<launch-tree :list='list' :options='options'></launch-tree>

list = [
  {
    name: '一级目录', // 目录名字
    isOpen: true, // 是否初始展开目录
    hightLight: true, // 是否初始高亮
    className: undefined, // 添加自定义样式
    childs: [], // 二级目录
    ...{} // 其他用户额外参数
  }
]
options = {
  callback: undefined // 自定义点击事件,callback(node)
}

github地址

图示:

Vue组件tree实现树形菜单

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
学习YUI.Ext 第四天--对话框Dialog的使用
Mar 10 Javascript
JS和jquery获取各种屏幕的宽度和高度的代码
Aug 02 Javascript
jquery和css3实现的炫酷时尚的菜单导航
Sep 01 Javascript
对比分析json及XML
Nov 28 Javascript
angular.foreach 循环方法使用指南
Jan 06 Javascript
jQuery仿京东商城楼梯式导航定位菜单
Jul 25 Javascript
jQuery插件HighCharts绘制2D金字塔图效果示例【附demo源码下载】
Mar 09 Javascript
利用js的闭包原理做对象封装及调用方法
Apr 07 Javascript
jquery处理checkbox(复选框)是否被选中实例代码
Jun 12 jQuery
JS实现商城秒杀倒计时功能(动态设置秒杀时间)
Dec 12 Javascript
js实现橱窗展示效果
Jan 11 Javascript
JS实现拖拽元素时与另一元素碰撞检测
Aug 27 Javascript
从零开始学习Node.js系列教程五:服务器监听方法示例
Apr 13 #Javascript
Angularjs 动态添加指令并绑定事件的方法
Apr 13 #Javascript
从零开始学习Node.js系列教程四:多页面实现数学运算的client端和server端示例
Apr 13 #Javascript
JS传参及动态修改页面布局
Apr 13 #Javascript
从零开始学习Node.js系列教程之基于connect和express框架的多页面实现数学运算示例
Apr 13 #Javascript
MUI 解决动态列表页图片懒加载再次加载不成功的bug问题
Apr 13 #Javascript
MUI  Scroll插件的使用详解
Apr 13 #Javascript
You might like
转PHP手册及PHP编程标准
2006/12/17 PHP
在Windows系统上安装PHP运行环境文字教程
2010/07/19 PHP
简单实现限定phpmyadmin访问ip的方法
2013/03/05 PHP
解析PHP跳出循环的方法以及continue、break、exit的区别介绍
2013/07/01 PHP
帝国cms目录结构分享
2015/07/06 PHP
利用js获取服务器时间的两个简单方法
2010/01/08 Javascript
xml文档转换工具,附图表例子(hta)
2010/11/17 Javascript
jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码
2016/02/25 Javascript
为什么JavaScript没有块级作用域
2016/05/22 Javascript
Bootstrap 折叠(Collapse)插件用法实例详解
2016/06/01 Javascript
js实现拖拽上传图片功能
2017/08/01 Javascript
jQuery实现checkbox即点即改批量删除及中间遇到的坑
2017/11/11 jQuery
基于substring()和substr()的使用以及区别(实例讲解)
2017/12/28 Javascript
浅谈webpack打包过程中因为图片的路径导致的问题
2018/02/21 Javascript
Easyui 去除jquery-easui tab页div自带滚动条的方法
2019/05/10 jQuery
9种方法优化jQuery代码详解
2020/02/04 jQuery
[01:15:36]加油刀塔第二期网络版
2014/08/09 DOTA
深入理解Python中的*重复运算符
2017/10/28 Python
详解Python中的Numpy、SciPy、MatPlotLib安装与配置
2017/11/17 Python
利用TensorFlow训练简单的二分类神经网络模型的方法
2018/03/05 Python
python梯度下降法的简单示例
2018/08/31 Python
Python访问MongoDB,并且转换成Dataframe的方法
2018/10/15 Python
python进阶之多线程对同一个全局变量的处理方法
2018/11/09 Python
Python request使用方法及问题总结
2020/04/26 Python
通俗讲解python 装饰器
2020/09/07 Python
使用CSS3实现一个3D相册效果实例
2016/12/03 HTML / CSS
One.com挪威:北欧成长最快的网络托管公司
2016/11/19 全球购物
几个判断型的面试题
2012/07/03 面试题
护士求职推荐信范文
2013/11/23 职场文书
简历中自我评价范文3则
2013/12/14 职场文书
电信营业员自我评价分享
2014/01/17 职场文书
试用期转正鉴定评语
2014/01/27 职场文书
国际贸易系求职信
2014/08/09 职场文书
给老婆道歉的话
2015/01/20 职场文书
公司财务部岗位职责
2015/04/14 职场文书
运动会100米广播稿
2015/08/19 职场文书