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 相关文章推荐
模拟电子签章盖章效果的jQuery插件源码
Jun 24 Javascript
javascript封装简单实现方法
Aug 11 Javascript
jQuery实现连续动画效果实例分析
Oct 09 Javascript
AngularJS使用ngMessages进行表单验证
Dec 27 Javascript
jquery validate表单验证的基本用法入门
Jan 18 Javascript
javascript的正则匹配方法学习
Feb 24 Javascript
angularjs实现文字上下无缝滚动特效代码
Sep 04 Javascript
JQueryEasyUI之DataGrid数据显示
Nov 23 Javascript
基于BootstrapValidator的Form表单验证(24)
Dec 12 Javascript
js replace()去除代码中空格的实例
Feb 14 Javascript
浅谈VUE防抖与节流的最佳解决方案(函数式组件)
May 22 Javascript
jquery获取并修改触发事件的DOM元素示例【基于target 属性】
Oct 10 jQuery
从零开始学习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跨站刷票的实现代码
2013/06/18 PHP
php5.2 Json不能正确处理中文、GB编码的解决方法
2014/03/28 PHP
使用phpexcel类实现excel导入mysql数据库功能(实例代码)
2016/05/12 PHP
php根据地址获取百度地图经纬度的实例方法
2019/09/03 PHP
jquery autocomplete自动完成插件的的使用方法
2010/08/07 Javascript
表单元素与非表单元素刷新区别详细解析
2013/11/06 Javascript
js几秒以后倒计时跳转示例
2013/12/26 Javascript
动态读取JSON解析键值对的方法
2014/06/03 Javascript
js图片滚动效果时间可随意设定当鼠标移上去时停止
2014/06/26 Javascript
JavaScript中输出标签的方法
2014/08/27 Javascript
jQuery EasyUI之DataGrid使用实例详解
2016/01/04 Javascript
javascript表单控件实例讲解
2016/09/13 Javascript
jQuery select自动选中功能实现方法分析
2016/11/28 Javascript
prototype与__proto__区别详细介绍
2017/01/09 Javascript
jQuery制作图片旋转效果
2017/02/02 Javascript
jQuery获取table表中的td标签(实例讲解)
2017/07/28 jQuery
深入理解vue-class-component源码阅读
2019/02/18 Javascript
解决vue项目input输入框双向绑定数据不实时生效问题
2020/08/05 Javascript
vue实现下载文件流完整前后端代码
2020/11/17 Vue.js
[01:03:41]DOTA2-DPC中国联赛 正赛 Dynasty vs XG BO3 第三场 2月2日
2021/03/11 DOTA
Python ZipFile模块详解
2013/11/01 Python
Python实现的FTP通信客户端与服务器端功能示例
2018/03/28 Python
Python中xml和dict格式转换的示例代码
2019/11/07 Python
Python&amp;&amp;GDAL实现NDVI的计算方式
2020/01/09 Python
Matplotlib自定义坐标轴刻度的实现示例
2020/06/18 Python
加州风格的游泳和沙滩装品牌:Cupshe
2019/06/10 全球购物
园长自我鉴定
2013/10/06 职场文书
小学作文评语大全
2014/04/21 职场文书
艺术教育实施方案
2014/05/03 职场文书
退休党员个人对照检查材料思想汇报
2014/09/29 职场文书
逃出克隆岛观后感
2015/06/09 职场文书
爱的教育观后感
2015/06/17 职场文书
2016年秋季开学典礼新闻稿
2015/11/25 职场文书
golang gopm get -g -v 无法获取第三方库的解决方案
2021/05/05 Golang
安装pytorch时报sslerror错误的解决方案
2021/05/17 Python