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 相关文章推荐
监控 url fragment变化的js代码
Apr 19 Javascript
jquery keypress,keyup,onpropertychange键盘事件
Jun 25 Javascript
jQuery圆形统计图开发实例
Jan 04 Javascript
jQuery实现Div拖动+键盘控制综合效果的方法
Mar 10 Javascript
angular $watch 一个变量的变化(实例讲解)
Aug 02 Javascript
详解layui弹窗父子窗口之间传参数的方法
Jan 16 Javascript
微信小程序实现列表下拉刷新上拉加载
Jul 29 Javascript
解决Vue.js 2.0 有时双向绑定img src属性失败的问题
Mar 14 Javascript
优雅的elementUI table单元格可编辑实现方法详解
Dec 23 Javascript
微信小程序自定义组件传值 页面和组件相互传数据操作示例
May 05 Javascript
javascript+css实现俄罗斯方块小游戏
Jun 28 Javascript
antd-DatePicker组件获取时间值,及相关设置方式
Oct 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
thinkphp 一个页面使用2次分页的实现方法
2013/07/15 PHP
PHP遍历并打印指定目录下所有文件实例
2014/02/10 PHP
PHP定时任务延缓执行的实现
2014/10/08 PHP
php短址转换实现方法
2015/02/25 PHP
PHP开发之归档格式phar文件概念与用法详解【创建,使用,解包还原提取】
2017/11/17 PHP
jQuery powerFloat万能浮动层下拉层插件使用介绍
2010/12/27 Javascript
jquery一句话全选/取消全选
2011/03/01 Javascript
理解JavaScript的prototype属性
2012/02/11 Javascript
左侧是表头的JS表格控件(自写,网上没有的)
2013/06/04 Javascript
Js(JavaScript)中,弹出是或否的选择框示例(confirm用法的实例分析)
2013/07/09 Javascript
jquery easyui combobox模糊过滤(示例代码)
2013/11/30 Javascript
JavaScript中字符串(string)转json的2种方法
2015/06/25 Javascript
JS获取中文拼音首字母并通过拼音首字母快速查找页面内对应中文内容的方法【附demo源码】
2016/08/19 Javascript
vue2中,根据list的id进入对应的详情页并修改title方法
2018/08/24 Javascript
理顺8个版本vue的区别(小结)
2018/09/17 Javascript
layui下拉列表select实现可输入查找的方法
2019/09/28 Javascript
[02:36]DOTA2上海特锦赛 回忆电竞生涯的重要瞬间
2016/03/25 DOTA
浅析Python编写函数装饰器
2016/03/18 Python
Python3实现购物车功能
2018/04/18 Python
在python win系统下 打开TXT文件的实例
2018/04/29 Python
基于Python开发chrome插件的方法分析
2018/07/07 Python
python找出因数与质因数的方法
2019/07/25 Python
最新2019Pycharm安装教程 亲测
2020/02/28 Python
基于django micro搭建网站实现加水印功能
2020/05/22 Python
详解Python IO口多路复用
2020/06/17 Python
利用Python实现字幕挂载(把字幕文件与视频合并)思路详解
2020/10/21 Python
现在输入n个数字,以逗号,分开;然后可选择升或者降序排序;按提交键就在另一页面显示按什么排序,结果为,提供reset
2012/11/09 面试题
火山动力Java笔试题
2014/06/26 面试题
中秋节超市促销方案
2014/01/30 职场文书
学校庆元旦歌咏比赛主持词
2014/03/18 职场文书
体育专业自荐书
2014/05/29 职场文书
合唱兴趣小组活动总结
2014/07/10 职场文书
财务工作犯错检讨书
2014/10/07 职场文书
创先争优宣传标语
2014/10/08 职场文书
mysql left join快速转inner join的过程
2021/06/30 MySQL
MySQL常用慢查询分析工具详解
2022/08/14 MySQL