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 相关文章推荐
JavaScript框架(iframe)操作总结
Apr 16 Javascript
js获取元素相对窗口位置的实现代码
Sep 28 Javascript
JavaScript中用getDate()方法返回指定日期的教程
Jun 09 Javascript
基于jquery实现导航菜单高亮显示(两种方法)
Aug 23 Javascript
javascript判断图片是否加载完成的方法推荐
May 13 Javascript
Node.js实现文件上传
Jul 05 Javascript
JS判断来路是否是百度等搜索索引进行弹窗或自动跳转的实现代码
Oct 09 Javascript
移动端点击态处理的三种实现方式
Jan 12 Javascript
react-router中的属性详解
Jun 01 Javascript
vue项目前端埋点的实现
Mar 06 Javascript
Vue 开发必须知道的36个技巧(小结)
Oct 09 Javascript
vue 实现cli3.0中使用proxy进行代理转发
Oct 30 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基础知识:控制结构
2006/12/13 PHP
php通过分类列表产生分类树数组的方法
2015/04/20 PHP
PHP使用phpunit进行单元测试示例
2019/09/23 PHP
js资料toString 方法
2007/03/13 Javascript
js中查找最近的共有祖先元素的实现代码
2010/12/30 Javascript
jQuery ajax 路由和过滤器使用说明
2011/08/02 Javascript
纯js写的分页表格数据为json串
2014/02/18 Javascript
javascript结合CSS实现苹果开关按钮特效
2015/04/07 Javascript
jQuery实现表格展开与折叠的方法
2015/05/04 Javascript
js实现文本框宽度自适应文本宽度的方法
2015/08/13 Javascript
js获取及修改网页背景色和字体色的方法
2015/12/29 Javascript
基于JS实现发送短信验证码后的倒计时功能(无视页面刷新,页面关闭不进行倒计时功能)
2016/09/02 Javascript
Bootstrap table右键功能实现方法
2017/02/20 Javascript
详解用node.js实现简单的反向代理
2017/06/26 Javascript
JavaScript事件处理程序详解
2017/09/19 Javascript
详解Node.js中的Async和Await函数
2018/02/22 Javascript
angular中两种表单的区别(响应式和模板驱动表单)
2018/12/06 Javascript
vue + any-touch实现一个iscroll 实现拖拽和滑动动画效果
2019/04/08 Javascript
Angular 多模块项目构建过程
2020/02/13 Javascript
Angular利用HTTP POST下载流文件的步骤记录
2020/07/26 Javascript
vue的$http的get请求要加上params操作
2020/11/12 Javascript
深入学习Python中的上下文管理器与else块
2017/08/27 Python
Python使用base64模块进行二进制数据编码详解
2018/01/11 Python
python爬取m3u8连接的视频
2018/02/28 Python
详解重置Django migration的常见方式
2019/02/15 Python
计算机二级python学习教程(3) python语言基本数据类型
2019/05/16 Python
python日志logging模块使用方法分析
2019/05/23 Python
pyqt5使用按钮进行界面的跳转方法
2019/06/19 Python
pandas分区间,算频率的实例
2019/07/04 Python
Django项目创建到启动详解(最全最详细)
2019/09/07 Python
python3实现名片管理系统(控制台版)
2020/11/29 Python
英国现代绅士品牌:Hackett
2017/12/17 全球购物
时尚孕妇装:Ingrid & Isabel
2019/05/08 全球购物
调解协议书
2014/04/16 职场文书
初任公务员培训心得体会
2016/01/08 职场文书
如何避免mysql启动时错误及sock文件作用分析
2022/01/22 MySQL