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 相关文章推荐
又一个小巧的图片预加载类
May 05 Javascript
javascript 网页跳转的方法
Dec 24 Javascript
js对象的比较
Feb 26 Javascript
Eclipse下jQuery文件报错出现错误提示红叉
Jan 13 Javascript
jquery高级编程的最佳实践详解
Mar 23 Javascript
解决JS无法调用Controller问题的方法
Dec 31 Javascript
微信小程序 WXDropDownMenu组件详解及实例代码
Oct 24 Javascript
JS组件系列之Gojs组件 前端图形化插件之利器
Nov 29 Javascript
利用adb shell和node.js实现抖音自动抢红包功能(推荐)
Feb 22 Javascript
轻松搞定jQuery+JSONP跨域请求的解决方案
Mar 06 jQuery
vue-cli 首屏加载优化问题
Nov 06 Javascript
js对象简介与基本用法示例
Mar 13 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/10/09 PHP
php学习之数据类型之间的转换代码
2011/05/29 PHP
PHP实现防盗链的方法分析
2017/07/25 PHP
JQuery.uploadify 上传文件插件的使用详解 for ASP.NET
2010/01/22 Javascript
基于jquery的合并table相同单元格的插件(精简版)
2011/04/05 Javascript
30个精美的jQuery幻灯片效果插件和教程
2011/08/23 Javascript
jQuery窗口、文档、网页各种高度的精确理解
2014/07/02 Javascript
多个jQuery版本共存的处理方案
2015/03/17 Javascript
AngularJs 利用百度地图API 定位当前位置 获取地址信息
2017/01/18 Javascript
JavaScript实现二维坐标点排序效果
2017/07/18 Javascript
Angularjs上传图片实例详解
2017/08/06 Javascript
Vue自定义事件(详解)
2017/08/19 Javascript
Vue中建立全局引用或者全局命令的方法
2017/08/21 Javascript
jQuery插件DataTables分页开发心得体会
2017/08/22 jQuery
通过vue-cli来学习修改Webpack多环境配置和发布问题
2017/12/22 Javascript
select获取下拉框的值 下拉框默认选中方法
2018/02/28 Javascript
JS实现把一个页面层数据传递到另一个页面的两种方式
2018/08/13 Javascript
vue组件入门知识全梳理
2020/09/21 Javascript
Map与WeakMap类型在JavaScript中的使用详解
2020/11/18 Javascript
[48:22]VGJ.S vs VG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
[03:17]DOTA2-DPC中国联赛1月29日Recap集锦
2021/03/11 DOTA
Python找出文件中使用率最高的汉字实例详解
2015/06/03 Python
Python中正则表达式详解
2017/05/17 Python
Python编程实现两个文件夹里文件的对比功能示例【包含内容的对比】
2017/06/20 Python
Django与JS交互的示例代码
2017/08/23 Python
python 打印直角三角形,等边三角形,菱形,正方形的代码
2017/11/21 Python
基于Django框架利用Ajax实现点赞功能实例代码
2018/08/19 Python
对pandas的算术运算和数据对齐实例详解
2018/12/22 Python
通过python实现弹窗广告拦截过程详解
2019/07/10 Python
Python matplotlib实时画图案例
2020/04/23 Python
浅谈pytorch中的BN层的注意事项
2020/06/23 Python
Django数据库迁移常见使用方法
2020/11/12 Python
css3中新增的样式使用示例附效果图
2014/08/19 HTML / CSS
网络教育自我鉴定
2014/02/04 职场文书
2015年度残疾人工作总结
2015/05/14 职场文书
2019单位介绍信怎么写
2019/06/24 职场文书