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 相关文章推荐
js以对象为索引的关联数组
Jul 04 Javascript
改善用户体验的五款jQuery插件分享
May 22 Javascript
JQuery动画和停止动画实例代码
Mar 01 Javascript
jQuery实现倒计时按钮功能代码分享
Sep 03 Javascript
jquery+css实现的红色线条横向二级菜单效果
Aug 22 Javascript
JS实现根据文件字节数返回文件大小的方法
Aug 02 Javascript
AngularJS指令用法详解
Nov 02 Javascript
简单几步实现返回顶部效果
Dec 05 Javascript
EasyUi 打开对话框后控件赋值及赋值后不显示的问题解决办法
Jan 19 Javascript
AngularJs 常用的过滤器
May 15 Javascript
JavaScript判断数组类型的方法
Oct 23 Javascript
vue使用swiper实现左右滑动切换图片
Oct 16 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 获取完整url地址
2008/12/20 PHP
php 缩略图实现函数代码
2011/06/23 PHP
PHP测试框架PHPUnit组织测试操作示例
2018/05/28 PHP
PHP序列化的四种实现方法与横向对比
2018/11/29 PHP
Laravel自动生成UUID,从建表到使用详解
2019/10/24 PHP
jQuery用unbind方法去掉hover事件及其他方法介绍
2013/03/18 Javascript
用JavaScript获取DOM元素位置和尺寸大小的方法
2013/04/12 Javascript
JS两种定义方式的区别、内部原理
2013/11/21 Javascript
js点击出现悬浮窗效果不使用JQuery插件
2014/01/20 Javascript
JS简单实现多级Select联动菜单效果代码
2015/09/06 Javascript
基于js实现微信发送好友如何分享到朋友圈、微博
2015/11/30 Javascript
jQuery EasyUI学习教程之datagrid点击列表头排序
2016/07/09 Javascript
vue实现标签云效果的示例
2020/11/09 Javascript
python解决汉字编码问题:Unicode Decode Error
2017/01/19 Python
Python3编程实现获取阿里云ECS实例及监控的方法
2017/08/18 Python
python3 遍历删除特定后缀名文件的方法
2018/04/23 Python
python游戏地图最短路径求解
2019/01/16 Python
python实现ip地址查询经纬度定位详解
2019/08/30 Python
基于Django统计博客文章阅读量
2019/10/29 Python
python分布式计算dispy的使用详解
2019/12/22 Python
python3用urllib抓取贴吧邮箱和QQ实例
2020/03/10 Python
OpenCV灰度化之后图片为绿色的解决
2020/12/01 Python
Python 将代码转换为可执行文件脱离python环境运行(步骤详解)
2021/01/25 Python
Pycharm 跳转回之前所在页面的操作
2021/02/05 Python
CSS3 :default伪类选择器使用简介
2018/03/15 HTML / CSS
详解使用canvas保存网页为pdf文件支持跨域
2018/11/23 HTML / CSS
美国百货齐全的精品网站,提供美式风格的产品:Overstock.com
2016/07/22 全球购物
德国专业木制品经销商:Holz-Direkt24
2019/12/26 全球购物
JMS中Topic和Queue有什么区别
2013/05/15 面试题
SQL Server 2000数据库的文件有哪些,分别进行描述
2013/03/30 面试题
参观考察邀请函范文
2014/01/29 职场文书
三八节主持词
2014/03/17 职场文书
委托证明模板
2014/09/16 职场文书
营销计划书
2015/01/17 职场文书
2015年大学迎新晚会总结
2015/07/16 职场文书
企业内部管理控制:采购授权审批制度范本
2020/01/19 职场文书