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 相关文章推荐
checkbox全选/取消全选以及checkbox遍历jQuery实现代码
Dec 02 Javascript
jQuery插件开发的两种方法及$.fn.extend的详解
Jan 16 Javascript
jQueryMobile之Helloworld与页面切换的方法
Feb 04 Javascript
jquery中filter方法用法实例分析
Feb 06 Javascript
微信中一些常用的js方法汇总
Mar 12 Javascript
JS随机调用指定函数的方法
Jul 01 Javascript
JavaScript实现的Tween算法及缓冲特效实例代码
Nov 03 Javascript
js获取新浪天气接口的实现代码
Jun 06 Javascript
vue轮播图插件vue-concise-slider的使用
Mar 13 Javascript
JavaScrip数组去重操作实例小结
Jun 20 Javascript
微信小程序用canvas画图并分享
Mar 09 Javascript
js 数组 fill() 填充方法
Nov 02 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
星际初学者游戏中永远要做的事
2020/03/04 星际争霸
php empty,isset,is_null判断比较(差异与异同)
2010/10/19 PHP
Thinkphp实现MySQL读写分离操作示例
2014/06/25 PHP
PHP获取短链接跳转后的真实地址和响应头信息的方法
2014/07/25 PHP
php实现Mongodb自定义方式生成自增ID的方法
2015/03/23 PHP
Yii2使用$this-&gt;context获取当前的Module、Controller(控制器)、Action等
2017/03/29 PHP
PHP实现的简单适配器模式示例
2017/06/22 PHP
PHP fclose函数用法总结
2019/02/15 PHP
Js 订制自己的AlertBox(信息提示框)
2009/01/09 Javascript
JQuery 学习笔记 选择器之一
2009/07/23 Javascript
javascript preload&amp;lazy load
2010/05/13 Javascript
JavaScript快速检测浏览器对CSS3特性的支持情况
2012/09/26 Javascript
Javascript中Event属性搜集整理
2013/09/17 Javascript
JavaScript设计模式之建造者模式介绍
2014/12/28 Javascript
JQUERY表单暂存功能插件分享
2016/02/23 Javascript
JS对大量数据进行多重过滤的方法
2016/11/04 Javascript
JavaScript实现经典排序算法之冒泡排序
2016/12/28 Javascript
Bootstrap DateTime Picker日历控件简单应用
2017/03/25 Javascript
浅谈angularjs依赖服务注入写法的注意点
2017/04/24 Javascript
js调用刷新界面的几种方式
2017/05/03 Javascript
用VueJS写一个Chrome浏览器插件的实现方法
2019/02/27 Javascript
Vue起步(无cli)的啊教程详解
2019/04/11 Javascript
在Vue.js中使用TypeScript的方法
2020/03/19 Javascript
Vue初始化中的选项合并之initInternalComponent详解
2020/06/11 Javascript
深入了解Vue.js 混入(mixins)
2020/07/23 Javascript
WebStorm无法正确识别Vue3组合式API的解决方案
2021/02/18 Vue.js
[01:16:13]DOTA2-DPC中国联赛 正赛 SAG vs Dragon BO3 第一场 2月22日
2021/03/11 DOTA
简单理解Python中的装饰器
2015/07/31 Python
Python中psutil的介绍与用法
2019/05/02 Python
python3.6 tkinter实现屏保小程序
2019/07/30 Python
详解Windows下PyCharm安装Numpy包及无法安装问题解决方案
2020/06/18 Python
anaconda安装pytorch1.7.1和torchvision0.8.2的方法(亲测可用)
2021/02/01 Python
html5 利用重力感应实现摇一摇换颜色可用来做抽奖等等
2014/05/07 HTML / CSS
勤俭节约演讲稿
2014/05/08 职场文书
我的中国梦主题班会
2015/08/14 职场文书
Python如何使用logging为Flask增加logid
2021/03/30 Python