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 图片裁剪技巧解读
Nov 15 Javascript
jQuery客户端分页实例代码
Nov 18 Javascript
从JQuery源码分析JavaScript函数的apply方法与call方法
Sep 25 Javascript
jQuery中$(function() {});问题详解
Aug 10 Javascript
Ionic快速安装教程
Jun 03 Javascript
jquery设置表单元素为不可用的简单代码
Jul 04 Javascript
AngularJS基础 ng-model-options 指令简单示例
Aug 02 Javascript
js实现点击按钮弹出上传文件的窗口
Dec 23 Javascript
ES6新数据结构Set与WeakSet用法分析
Mar 31 Javascript
手把手教你使用vue-cli脚手架(图文解析)
Nov 08 Javascript
extjs图表绘制之条形图实现方法分析
Mar 06 Javascript
详解TypeScript中的类型保护
Apr 29 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读取txt文件组成SQL并插入数据库的代码(原创自Zjmainstay)
2012/07/31 PHP
ThinkPHP之M方法实例详解
2014/06/20 PHP
给ECShop添加最新评论
2015/01/07 PHP
弹出模态框modal的实现方法及实例
2017/09/19 PHP
PHP基于cookie实现统计在线人数功能示例
2019/01/16 PHP
PHP中PCRE正则解析代码详解
2019/04/26 PHP
php中的钩子理解及应用实例分析
2019/08/30 PHP
jQuery弹性滑动导航菜单实现思路及代码
2013/05/02 Javascript
jquery submit ie6下失效的原因分析及解决方法
2013/11/15 Javascript
JS获取下拉列表所选中的TEXT和Value的实现代码
2014/01/11 Javascript
JavaScript继承模式粗探
2016/01/12 Javascript
谈一谈javascript中继承的多种方式
2016/02/19 Javascript
Javascript基础回顾之(三) js面向对象
2017/01/31 Javascript
angularjs之$timeout指令详解
2017/06/13 Javascript
vue单页应用中如何使用jquery的方法示例
2017/07/27 jQuery
AngularJS实现的select二级联动下拉菜单功能示例
2017/10/25 Javascript
JS实现头条新闻的经典轮播图效果示例
2019/01/30 Javascript
koa大型web项目中使用路由装饰器的方法示例
2019/04/02 Javascript
VUEX采坑之路之获取不到$store的解决方法
2019/11/08 Javascript
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
2021/02/23 Vue.js
Ruby使用eventmachine为HTTP服务器添加文件下载功能
2016/04/20 Python
python sys,os,time模块的使用(包括时间格式的各种转换)
2018/04/27 Python
Python3实现的判断回文链表算法示例
2019/03/08 Python
基于python if 判断选择结构的实例详解
2019/05/06 Python
pytorch VGG11识别cifar10数据集(训练+预测单张输入图片操作)
2020/06/24 Python
python实现三壶谜题的示例详解
2020/11/02 Python
Python字典dict常用方法函数实例
2020/11/09 Python
计算机专业自我鉴定
2013/10/15 职场文书
计算机本科生自荐信
2013/10/15 职场文书
中专毕业生个人职业生涯规划
2014/02/19 职场文书
2014年专项整治工作总结
2014/11/17 职场文书
2016秋季幼儿园开学寄语
2015/12/03 职场文书
优胜劣汰,强者为王——读《鲁滨逊漂流记》有感
2019/08/15 职场文书
哪类餐饮行业,最适合在高校创业?
2019/08/19 职场文书
eval(cmd)与eval($cmd)的区别与联系
2021/07/07 PHP
Python机器学习之决策树和随机森林
2021/07/15 Javascript