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 相关文章推荐
兼容IE和Firefox的javascript获取iframe文档内容的函数
Aug 15 Javascript
Visual Studio中js调试的方法图解
Jun 30 Javascript
Jquery日期选择datepicker插件用法实例分析
Jun 08 Javascript
简述JavaScript对传统文档对象模型的支持
Jun 16 Javascript
jquery实现经典的淡入淡出选项卡效果代码
Sep 22 Javascript
jQuery中的Deferred和promise 的区别
Apr 03 Javascript
图片加载完成再执行事件的实例
Nov 16 Javascript
浅谈vue的props,data,computed变化对组件更新的影响
Jan 16 Javascript
js删除数组中的元素delete和splice的区别详解
Feb 03 Javascript
js实现指定时间倒计时效果
Aug 26 Javascript
解决layer 动态加载select 失效的问题
Sep 18 Javascript
关于layui flow loading占位图的实现方法
Sep 21 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
受疫情影响 动画《Re从零开始的异世界生活》第二季延期至7月
2020/03/10 日漫
php set_time_limit(0) 设置程序执行时间的函数
2010/05/26 PHP
PHP错误和异长常处理总结
2014/03/06 PHP
php中session过期时间设置及session回收机制介绍
2014/05/05 PHP
PHPStrom中实用的功能和快捷键大全
2015/09/23 PHP
PHP正则删除HTML代码中宽高样式的方法
2017/06/12 PHP
解决IE下select标签innerHTML插入option的BUG(兼容IE,FF,Opera,Chrome,Safari)
2010/05/13 Javascript
EditPlus注册码生成器(js代码实现)
2013/03/25 Javascript
45个JavaScript编程注意事项、技巧大全
2015/02/11 Javascript
js无提示关闭浏览器窗口的两种方法分析
2016/11/06 Javascript
JS中绑定事件顺序(事件冒泡与事件捕获区别)
2017/01/24 Javascript
bootstrap Validator 模态框、jsp、表单验证 Ajax提交功能
2017/02/17 Javascript
jQuery修改DOM结构_动力节点Java学院整理
2017/07/05 jQuery
jQuery Autocomplete简介_动力节点Java学院整理
2017/07/17 jQuery
js前端面试之同步与异步问题详解
2019/04/03 Javascript
如何构建一个Vue插件并生成npm包
2020/10/26 Javascript
[01:47]2018年度DOTA2最佳教练-完美盛典
2018/12/16 DOTA
Python如何实现文本转语音
2016/08/08 Python
django配置连接数据库及原生sql语句的使用方法
2019/03/03 Python
Python面向对象程序设计构造函数和析构函数用法分析
2019/04/12 Python
Django 自定义权限管理系统详解(通过中间件认证)
2020/03/11 Python
基于Python的OCR实现示例
2020/04/03 Python
python实现移动木板小游戏
2020/10/09 Python
CSS3动画特效在活动页中的应用
2020/01/21 HTML / CSS
HTML5添加鼠标悬浮音响效果不使用FLASH
2014/04/23 HTML / CSS
HTML5 播放 RTSP 视频的实例代码
2019/07/29 HTML / CSS
捷克母婴用品购物网站:Feedo.cz
2020/12/28 全球购物
美国健康和保健平台:healtop
2020/07/02 全球购物
.NET是怎么支持多种语言的
2015/02/24 面试题
信息管理专业学生自荐信格式
2013/09/22 职场文书
校长寄语大全
2014/04/09 职场文书
安全伴我行演讲稿
2014/09/04 职场文书
辞职信怎么写
2015/02/27 职场文书
幼儿园大班个人总结
2015/02/28 职场文书
运动会主持词大全
2015/07/02 职场文书
MySQL表的增删改查基础教程
2021/04/07 MySQL