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 解决表单仍然提交即使监听处理函数返回false
Mar 14 Javascript
DIY jquery plugin - tabs标签切换实现代码
Dec 11 Javascript
Jqyery中同等与js中windows.onload的应用
May 10 Javascript
js 获取input点选按钮的值的方法
Apr 14 Javascript
jQuery针对各类元素操作基础教程
Aug 29 Javascript
jQuery+PHP实现动态数字展示特效
Mar 14 Javascript
浅谈js函数的多种定义方法与区别
Nov 29 Javascript
jQuery动态生成不规则表格(前后端)
Feb 21 Javascript
微信小程序 空白页重定向解决办法
Jun 27 Javascript
vue.js做一个简单的编辑菜谱功能
May 08 Javascript
使用vue-cli脚手架工具搭建vue-webpack项目
Jan 14 Javascript
react项目如何使用iconfont的方法步骤
Mar 13 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 mkdir()定义和用法
2009/01/14 PHP
LaravelS通过Swoole加速Laravel/Lumen详解
2018/03/02 PHP
php学习笔记之字符串常见操作总结
2019/07/16 PHP
php pdo连接数据库操作示例
2019/11/18 PHP
TopList标签和JavaScript结合两例
2007/08/12 Javascript
javascript的trim,ltrim,rtrim自定义函数
2008/09/21 Javascript
JavaScript操作XML 使用百度RSS作为新闻源示例
2012/02/17 Javascript
关于jQuery object and DOM element
2013/04/15 Javascript
jquery实现div拖拽宽度示例代码
2013/07/31 Javascript
一个JS的日期格式化算法示例
2013/07/31 Javascript
jQuery中:contains选择器用法实例
2014/12/30 Javascript
Position属性之relative用法
2015/12/14 Javascript
JS常见创建类的方法小结【工厂方式,构造器方式,原型方式,联合方式等】
2017/04/01 Javascript
vue 实现剪裁图片并上传服务器功能
2018/03/01 Javascript
jQuery实现常见的隐藏与展示列表效果示例
2018/06/04 jQuery
Python实现批量读取word中表格信息的方法
2015/07/30 Python
用python找出那些被“标记”的照片
2017/04/20 Python
python对csv文件追加写入列的方法
2019/08/01 Python
通过实例了解python property属性
2019/11/01 Python
Python Pickle 实现在同一个文件中序列化多个对象
2019/12/30 Python
使用python matplotlib 画图导入到word中如何保证分辨率
2020/04/16 Python
如何基于Python Matplotlib实现网格动画
2020/07/20 Python
Django如何使用asyncio协程和ThreadPoolExecutor多线程
2020/10/12 Python
美国一站式电动和手动工具商店:International Tool
2020/11/26 全球购物
物业总经理岗位职责
2014/02/28 职场文书
《金子》教学反思
2014/04/13 职场文书
测绘工程专业求职信
2014/07/15 职场文书
青年岗位能手事迹材料
2014/12/23 职场文书
西岭雪山导游词
2015/02/06 职场文书
2015年防汛工作总结
2015/05/15 职场文书
如何写好一份优秀的工作总结?
2019/06/21 职场文书
Python实战之用tkinter库做一个鼠标模拟点击器
2021/04/27 Python
把77A收信机改造成收音机
2022/04/05 无线电
Python OpenCV实现图像模板匹配详解
2022/04/07 Python
Java对文件的读写操作方法
2022/04/29 Java/Android
vue-cli3.x配置全局的scss的时候报错问题及解决
2022/04/30 Vue.js