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 相关文章推荐
让GoogleCode的SVN下的HTML文件在FireFox下正常显示.
May 25 Javascript
javascript阻止scroll事件多次执行的思路及实现
Nov 08 Javascript
使用jquery.qrcode生成彩色二维码实例
Aug 08 Javascript
express的中间件bodyParser详解
Dec 04 Javascript
javascript数组遍历for与for in区别详解
Dec 04 Javascript
jQuery结合HTML5制作的爱心树表白动画
Feb 01 Javascript
js实现对table动态添加、删除和更新的方法
Feb 10 Javascript
jQuery使用animate实现ul列表项相互飘动效果示例
Sep 16 Javascript
自己封装的一个原生JS拖动方法(推荐)
Nov 22 Javascript
微信小程序 自动登陆PHP源码实例(源码下载)
May 08 Javascript
Vue单页及多页应用全局配置404页面实践记录
May 22 Javascript
JavaScript学习笔记之DOM基础操作实例小结
Jan 09 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 无法加载mysql的module的时候的配置的解决方案引发的思考
2012/01/27 PHP
PHP中批量生成静态html(命令行下运行PHP)
2014/04/19 PHP
PHP QRCODE生成彩色二维码的方法
2016/05/19 PHP
利用腾讯的ip地址库做ip物理地址定位
2010/07/24 Javascript
jquery html动态生成select标签出问题的解决方法
2013/11/20 Javascript
javascript实现数字验证码的简单实例
2014/02/10 Javascript
Javascript学习笔记之函数篇(四):arguments 对象
2014/11/23 Javascript
教你如何使用firebug调试功能了解javascript闭包和this
2015/03/04 Javascript
jquery插件hiAlert实现网页对话框美化
2015/05/03 Javascript
jQuery实现的简单折叠菜单(折叠面板)效果代码
2015/09/16 Javascript
jQuery插件Timelinr 实现时间轴特效
2015/10/04 Javascript
js全选按钮的实现方法
2015/11/17 Javascript
input点击后placeholder中的提示消息消失
2016/01/15 Javascript
Bootstrap按钮功能之查询按钮和重置按钮
2016/10/26 Javascript
JS对大量数据进行多重过滤的方法
2016/11/04 Javascript
vue-router单页面路由
2017/06/17 Javascript
Vue进度条progressbar组件功能
2018/04/17 Javascript
详解angular路由高亮之RouterLinkActive
2018/04/28 Javascript
微信小程序自定义toast弹窗效果的实现代码
2018/11/15 Javascript
详解puppeteer使用代理
2018/12/27 Javascript
JS module的导出和导入的实现代码
2019/02/25 Javascript
vue + axios get下载文件功能
2019/09/25 Javascript
Node.js API详解之 vm模块用法实例分析
2020/05/27 Javascript
python 读取txt,json和hdf5文件的实例
2018/06/05 Python
Python3使用SMTP发送带附件邮件
2020/06/16 Python
Python替换月份为英文缩写的实现方法
2019/07/15 Python
Python API自动化框架总结
2019/11/12 Python
如何通过 CSS 写出火焰效果
2021/03/24 HTML / CSS
应届生船舶驾驶求职信
2013/10/19 职场文书
运动会解说词200字
2014/02/06 职场文书
趣味游戏活动方案
2014/02/07 职场文书
运动会加油稿20字
2014/11/15 职场文书
2014年新农村建设工作总结
2014/12/01 职场文书
商务代表岗位职责
2015/02/15 职场文书
SpringBoot生成License的实现示例
2021/06/16 Java/Android
简单谈谈Python面向对象的相关知识
2021/06/28 Python