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 相关文章推荐
将HTML自动转为JS代码
Jun 26 Javascript
EasyUI中datagrid在ie下reload失败解决方案
Mar 09 Javascript
jQuery实现可以控制图片旋转角度效果(附demo源码下载)
Jan 27 Javascript
基于javascript实现tab选项卡切换特效调试笔记
Mar 30 Javascript
20分钟轻松创建自己的Bootstrap站点
May 12 Javascript
微信小程序之获取当前位置经纬度以及地图显示详解
May 09 Javascript
微信小程序实现默认第一个选中变色效果
Jul 17 Javascript
mpvue+vuex搭建小程序详细教程(完整步骤)
Sep 30 Javascript
vue组件之间的数据传递方法详解
Apr 19 Javascript
在layui下对元素进行事件绑定的实例
Sep 06 Javascript
vue给对象动态添加属性和值的实例
Sep 09 Javascript
Vue在chrome44偶现点击子元素事件无法冒泡的解决方法
Dec 15 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中convert_uuencode()与convert_uuencode函数用法实例
2014/11/22 PHP
php实现的一段简单概率相关代码
2016/05/30 PHP
thinkphp的dump函数无输出实例代码
2016/11/15 PHP
PHP匿名函数(闭包函数)详解
2019/03/22 PHP
jQuery 位置函数offset,innerWidth,innerHeight,outerWidth,outerHeight,scrollTop,scrollLeft
2010/03/23 Javascript
XMLHttpRequest处理xml格式的返回数据(示例代码)
2013/11/21 Javascript
捕获和分析JavaScript Error的方法
2014/03/25 Javascript
js实现时间显示几天前、几小时前或者几分钟前的方法集锦
2015/05/29 Javascript
vue修改vue项目运行端口号的方法
2017/08/04 Javascript
动态统计当前输入内容的字节、字符数的实例详解
2017/10/27 Javascript
解决vue中监听input只能输入数字及英文或者其他情况的问题
2018/08/30 Javascript
JavaScript实现打砖块游戏
2020/02/25 Javascript
[08:54]《一刀刀一天》之DOTA全时刻18:十九支奔赴西雅图队伍全部出炉
2014/06/04 DOTA
[38:44]DOTA2上海特级锦标赛A组小组赛#2 Secret VS CDEC第二局
2016/02/25 DOTA
Pyramid Mako模板引入helper对象的步骤方法
2013/11/27 Python
Python群发邮件实例代码
2014/01/03 Python
在主机商的共享服务器上部署Django站点的方法
2015/07/22 Python
Python机器学习logistic回归代码解析
2018/01/17 Python
Python 将pdf转成图片的方法
2018/04/23 Python
python自动化报告的输出用例详解
2018/05/30 Python
Selenium结合BeautifulSoup4编写简单的python爬虫
2020/11/06 Python
Python3 用matplotlib绘制sigmoid函数的案例
2020/12/11 Python
Html5实现如何在两个div元素之间拖放图像
2013/03/29 HTML / CSS
资深生产主管自我评价
2013/09/22 职场文书
护理自荐信范文
2013/10/05 职场文书
中专毕业生求职简历的自我评价
2013/10/21 职场文书
应届护士推荐信
2013/11/16 职场文书
CAD制图人员的自荐信
2014/02/07 职场文书
房地产促销活动方案
2014/03/01 职场文书
学习退步检讨书
2014/09/28 职场文书
干部作风建设个人剖析材料
2014/10/11 职场文书
信仰观后感
2015/06/03 职场文书
十八大观后感
2015/06/12 职场文书
2015年工商局个人工作总结
2015/07/23 职场文书
员工给公司的建议书
2019/06/24 职场文书
Pytorch中的数据集划分&正则化方法
2021/05/27 Python