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下用层来实现select的title提示属性
Feb 23 Javascript
JS设置获取cookies的方法
Jan 26 Javascript
jquery移除、绑定、触发元素事件使用示例详解
Apr 10 Javascript
JS实现仿FLASH效果的竖排导航代码
Sep 15 Javascript
理解Javascript图片预加载
Feb 23 Javascript
Javascript点击其他任意地方隐藏关闭DIV实例
Jun 21 Javascript
JS实现图片延迟加载并淡入淡出效果的简单方法
Aug 25 Javascript
JavaScript字符集编码与解码详谈
Feb 02 Javascript
JS实现的二叉树算法完整实例
Apr 06 Javascript
jQuery Json数据格式排版高亮插件json-viewer.js使用方法详解
Jun 12 jQuery
解决微信小程序中的滚动穿透问题
Sep 16 Javascript
Vue中import from的来源及省略后缀与加载文件夹问题
Feb 09 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防止网站被刷新的方法汇总
2014/12/01 PHP
分享微信扫码支付开发遇到问题及解决方案-附Ecshop微信支付插件
2015/08/23 PHP
smarty简单应用实例
2015/11/03 PHP
CodeIgniter配置之routes.php用法实例分析
2016/01/19 PHP
深入理解PHP的远程多会话调试
2017/09/21 PHP
PHP商品秒杀问题解决方案实例详解【mysql与redis】
2019/07/22 PHP
根据分辨率不同,调用不同的css文件
2006/08/25 Javascript
了解一点js的Eval函数
2012/07/26 Javascript
js获取当月最后一天实例代码
2013/11/19 Javascript
JS+CSS实现六级网站导航主菜单效果
2015/09/28 Javascript
jQuery基于扩展实现的倒计时效果
2016/05/14 Javascript
javascript鼠标滑过显示二级菜单特效
2020/11/18 Javascript
AngularJs 指令详解及示例代码
2016/09/01 Javascript
微信小程序开发的四十个技术窍门总结(推荐)
2017/01/23 Javascript
JS实现PC手机端和嵌入式滑动拼图验证码三种效果
2017/02/15 Javascript
详解在Vue中通过自定义指令获取dom元素
2017/03/04 Javascript
AngularJS入门教程二:在路由中传递参数的方法分析
2017/05/27 Javascript
vue 2.0项目中如何引入element-ui详解
2017/09/06 Javascript
使用Easyui实现查询条件的后端传递并自动刷新表格的两种方法
2019/09/09 Javascript
JavaScript制作3D旋转相册
2020/08/02 Javascript
vue项目中定义全局变量、函数的几种方法
2019/11/08 Javascript
python+django加载静态网页模板解析
2017/12/12 Python
python通过getopt模块如何获取执行的命令参数详解
2017/12/29 Python
Python使用matplotlib填充图形指定区域代码示例
2018/01/16 Python
python生成ppt的方法
2018/06/07 Python
彻底理解Python中的yield关键字
2019/04/01 Python
Django REST framwork的权限验证实例
2020/04/02 Python
CSS3中设置3D变形的transform-style属性详解
2016/05/23 HTML / CSS
纯CSS3绘制打火机动画火焰效果
2016/07/18 HTML / CSS
高清屏中使用Canvas绘图出现模糊的问题及解决方法
2019/06/03 HTML / CSS
英国女士家居服网站:hush
2017/08/09 全球购物
汽车运用工程毕业生自荐信
2013/10/29 职场文书
预备党员2014全国两会学习心得体会
2014/03/10 职场文书
工会工作先进事迹
2014/08/18 职场文书
2014年接待工作总结
2014/11/26 职场文书
一个成功的互联网创业项目,必须满足这些要求
2019/08/23 职场文书