Vue.js 递归组件实现树形菜单(实例分享)


Posted in Javascript onDecember 21, 2016

最近看了 Vue.js 的递归组件,实现了一个最基本的树形菜单。

项目结构:

Vue.js 递归组件实现树形菜单(实例分享)

main.js 作为入口,很简单:

import Vue from 'vue'
Vue.config.debug = true
import main from './components/main.vue'
new Vue({
 el: '#app',
 render: h => h(main)
})

它引入了一个组件 main.vue:

<template>
 <div class="tree-menu">
 <ul v-for="menuItem in theModel">
 <my-tree :model="menuItem"></my-tree>
 </ul>
 </div>
</template>
<script>
var myData = [
 {
 'id': '1',
 'menuName': '基础管理',
 'menuCode': '10',
 'children': [
 {
 'menuName': '用户管理',
 'menuCode': '11'
 },
 {
 'menuName': '角色管理',
 'menuCode': '12',
 'children': [
 {
 'menuName': '管理员',
 'menuCode': '121'
 },
 {
 'menuName': 'CEO',
 'menuCode': '122'
 },
 {
 'menuName': 'CFO',
 'menuCode': '123'
 },
 {
 'menuName': 'COO',
 'menuCode': '124'
 },
 {
 'menuName': '普通人',
 'menuCode': '124'
 }
 ]
 },
 {
 'menuName': '权限管理',
 'menuCode': '13'
 }
 ]
 },
 {
 'id': '2',
 'menuName': '商品管理',
 'menuCode': ''
 },
 {
 'id': '3',
 'menuName': '订单管理',
 'menuCode': '30',
 'children': [
 {
 'menuName': '订单列表',
 'menuCode': '31'
 },
 {
 'menuName': '退货列表',
 'menuCode': '32',
 'children': []
 }
 ]
 },
 {
 'id': '4',
 'menuName': '商家管理',
 'menuCode': '',
 'children': []
 }
];
import myTree from './common/treeMenu.vue'
export default {
 components: {
 myTree
 },
 data() {
 return {
 theModel: myData
 }
 }
}
</script>

该文件引入了树形组件 treeMenu.vue:

<template>
 <li>
 <span @click="toggle">
 <i v-if="isFolder" class="icon" :class="[open ? 'folder-open': 'folder']"></i>
 <i v-if="!isFolder" class="icon file-text"></i>
 {{ model.menuName }}
 </span>
 <ul v-show="open" v-if="isFolder">
 <tree-menu v-for="item in model.children" :model="item"></tree-menu>
 </ul>
 </li>
</template>
 <script>
export default {
 name: 'treeMenu',
 props: ['model'],
 data() {
 return {
 open: false,
 isFolder: true
 }
 },
 computed: {
 isFolder: function() {
 return this.model.children && this.model.children.length
 }
 },
 methods: {
 toggle: function() {
 if (this.isFolder) {
 this.open = !this.open
 }
 }
 }
}
</script>
 <style>
ul {
 list-style: none;
}
i.icon {
 display: inline-block;
 width: 15px;
 height: 15px;
 background-repeat: no-repeat;
 vertical-align: middle;
}
.icon.folder {
 background-image: url(/src/assets/folder.png);
}
.icon.folder-open {
 background-image: url(/src/assets/folder-open.png);
}
.icon.file-text {
 background-image: url(/src/assets/file-text.png);
}
.tree-menu li {
 line-height: 1.5;
}
</style>

就这么简单。这篇文章还真没什么可写的,权当记录吧。

截图效果如下:

Vue.js 递归组件实现树形菜单(实例分享)

项目代码下载地址:http://xiazai.3water.com/201612/yuanma/caihg-master_3water.rar

 以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
javascript引用对象的方法
Jan 11 Javascript
学习从实践开始之jQuery插件开发 菜单插件开发
May 03 Javascript
jQuery ui autocomplete选择列表被Bootstrap模态窗遮挡的完美解决方法
Sep 23 Javascript
JavaScript限制在客户区可见范围的拖拽(解决scrollLeft和scrollTop的问题)(2)
May 17 Javascript
JS实现经典的中国地区三级联动下拉菜单功能实例【测试可用】
Jun 06 Javascript
Vue添加请求拦截器及vue-resource 拦截器使用
Nov 23 Javascript
在 React、Vue项目中使用SVG的方法
Feb 09 Javascript
Vue2.x通用编辑组件的封装及应用详解
May 28 Javascript
vue App.vue中的公共组件改变值触发其他组件或.vue页面监听
May 31 Javascript
使用Node.js在深度学习中做图片预处理的方法
Sep 18 Javascript
Vue状态模式实现窗口停靠功能(灵动、自由, 管理后台Admin界面)
Mar 06 Javascript
javascript实现倒计时提示框
Mar 02 Javascript
详解jQuery选择器
Dec 21 #Javascript
如何清除IE10+ input X 文本框的叉叉和密码输入框的眼睛图标
Dec 21 #Javascript
js实现可输入可选择的select下拉框
Dec 21 #Javascript
详解handlebars+require基本使用方法
Dec 21 #Javascript
JS实现的驼峰式和连字符式转换功能分析
Dec 21 #Javascript
JS实现的RGB网页颜色在线取色器完整实例
Dec 21 #Javascript
js querySelector() 使用方法
Dec 21 #Javascript
You might like
sqlyog 中文乱码问题的设置方法
2008/10/19 PHP
php比较多维数组中值的大小排序实现代码
2012/09/08 PHP
PHP中使用BigMap实例
2015/03/30 PHP
PHP生成图片验证码功能示例
2017/01/12 PHP
PHP编程计算文件或数组中单词出现频率的方法
2017/05/22 PHP
Thinkphp开发--集成极光推送
2017/09/15 PHP
PHP实现将base64编码字符串转换成图片示例
2018/06/22 PHP
可拖动窗口,附带鼠标控制渐变透明,开启关闭功能
2006/06/26 Javascript
点击button获取text内容并改变样式的js实现
2014/09/09 Javascript
深入理解JavaScript系列(38):设计模式之职责链模式详解
2015/03/04 Javascript
js由下向上不断上升冒气泡效果实例
2015/05/07 Javascript
Angularjs中使用Filters详解
2016/03/11 Javascript
浅谈Javascript数组(推荐)
2016/05/17 Javascript
完美解决IE不支持Data.parse()的问题
2016/11/24 Javascript
webuploader模态框ueditor显示问题解决方法
2016/12/27 Javascript
js 调用百度分享功能
2017/02/27 Javascript
addeventlistener监听scroll跟touch(实例讲解)
2017/08/04 Javascript
AngularJS日程表案例详解
2017/08/15 Javascript
angular实现页面打印局部功能的思考与方法
2018/04/13 Javascript
关于Angularjs中跨域设置白名单问题
2018/04/17 Javascript
js中关于Blob对象的介绍与使用
2019/11/29 Javascript
JavaScript定时器使用方法详解
2020/03/26 Javascript
vue-drag-chart 拖动/缩放图表组件的实例代码
2020/04/10 Javascript
Python实现过滤单个Android程序日志脚本分享
2015/01/16 Python
python多线程并发让两个LED同时亮的方法
2019/02/18 Python
python实现ssh及sftp功能(实例代码)
2020/03/16 Python
Python实现密钥密码(加解密)实例详解
2020/04/26 Python
解决python虚拟环境切换无效的问题
2020/04/30 Python
VICHY薇姿英国官网:全球专业敏感肌护肤领先品牌
2017/07/04 全球购物
校庆活动方案
2014/03/31 职场文书
省级优秀毕业生主要事迹
2014/05/29 职场文书
革命英雄事迹演讲稿
2014/09/13 职场文书
2016年春季运动会广播稿
2015/08/19 职场文书
python基础之爬虫入门
2021/05/10 Python
Python一行代码实现自动发邮件功能
2021/05/30 Python
Javascript 解构赋值详情
2021/11/17 Javascript