如何用vue实现树形菜单?
在公司培训了2周,布置的作业是从树形,grid分页以及echarts中选一个。由于都不是很熟,就挑了第一个。本来想在网上找找参考,然后模仿着做一个,但是网上的代码多少参差不齐,写到一半没了,所以只要自己写篇博客,记录下实现过程。
一、准备工作:
1.此次树形是用vue实现的,电脑需提前配置好node.js和vue.js,具体怎么配置,这里不作说明。
1)如果不记得自己有没有安装,可以win+R调出运行窗口,输入cmd,按enter
2)输入node -v和vue -V(注意vue中的-V是大写的)
node -v
vue -V
如果显示了版本号,则意为已安装。
2.引用奥森图标,进入官网下载包
3.需要对vue和webpack有基本的了解
一切准备就绪后,那么我们就开始吧
二、安装
1.首先在本地创建一个文件夹,命名为vue-tree,进入命令行窗口,然后进入到vue-tree文件夹所在位置
2.安装vue-cli,用cnpm更快
npm i -g vue-cli
然后创建一个webpack项目并且下载依赖
vue init webpack vue-tutorial
进入到vue-tutorial文件夹里,cd vue-tutorial
npm i
然后
npm run dev
这时我们就可以在localhost:8080中查看我们的应用了。
三、代码展示
下面进入重点啦~
1.打开你的main.js文件
然后在src/components文件夹下新建2个vue文件,同时新建一个common文件夹,在里面新增一个vue文件,具体看图(这里的font-aswesome是我下载的一个压缩包),layout负责布局展示,index负责树形展示,treeMenu负责渲染。
我们先配置好main.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Layout from './components/layout.vue'
import IndexPages from './common/index.vue'
import myTree from './components/treeMenu.vue'
Vue.use(VueRouter)
let router = new VueRouter({
mode: 'history',
routes: [
{
path: '/',
component: IndexPages
}
]
}) /* eslint-disable no-new */
new Vue({
el: '#app',
router,
template: '<Layout/>',
components: { Layout }
})
2.打开layout.vue文件,开始编写(这段样式用的慕课一位讲师的)。其他的组件将在<router-view></router-view>中被渲染出来。
/**
* 页面的入口,负责页面的布局
*/ <template>
<div>
<div class="app-head">
<div class="app-head-inner">
<img src="../assets/logo.png">
<div class="head-nav">
<ul class="nav-list">
<li>登录</li>
<li class="nav-pile">|</li>
<li>注册</li>
<li class="nav-pile">|</li>
<li>关于</li>
</ul>
</div>
</div>
</div> <div class="container">
<router-view></router-view>
</div> <div class="app-foot">
<p>© 2017 cindy</p>
</div>
</div>
</template> <script> </script> <!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
} a {
color: inherit;
text-decoration: none;
}
body {
background: #f0f2f5;
font-family: "Helvetica Neue",Helvetica,Arial,"Hiragino Sans GB","Hiragino Sans GB W3","Microsoft YaHei UI","Microsoft YaHei","WenQuanYi Micro Hei",sans-serif;
font-size: 14px;
color: #444;
}
.app-head {
background: #363636;
color: #b2b2b2;
height: 90px;
line-height: 90px;
width: 100%;
}
.app-head-inner {
width: 1200px;
margin: 0 auto;
}
.app-head-inner img {
width: 50px;
margin-top: 20px;
}
.head-nav {
float: right;
}
.head-nav ul {
overflow: hidden;
}
.head-nav li {
cursor: pointer;
float: left;
}
.nav-pile {
padding: 0 10px;
}
.app-foot {
text-align: center;
height: 80px;
width: 100%;
line-height: 80px;
background: #e3e4e8;
clear: both;
margin-top: 30px;
}
.container {
width: 1200px;
height: 470px;
margin: 0 auto;
}
ul li {
padding-left: 10px;
} </style>
3.打开index.vue文件,代码如下,树形主要在<ul v-for="menuItem in theModel"> <myTree class="item" :model="menuItem"></myTree> </ul>实现。
/**
* 树形和echarts的展示
*/
<template>
<div class="index-wrap">
<div class="index-left">
<div class="index-left-block">
<h2>树形侧边导航栏</h2>
<ul v-for="menuItem in theModel">
<myTree class="item" :model="menuItem"></myTree>
</ul>
</div>
</div>
<div class="index-right">
<div class="index-right-block">
</div>
</div>
</div>
</template> <script>
import myTree from '../components/treeMenu.vue'var myData =[{
'id': '1',
'menuName': 'echarts',
'menuCode': '10',
'children': [
{
'menuName': '地图',
'menuCode': '11',
},
{
'menuName': '柱状图',
'menuCode': '12',
'children': [
{
'menuName': '交错正负轴标签',
'menuCode': '121'
},
{
'menuName': '柱状图框选 ',
'menuCode': '122'
},
{
'menuName': '堆叠柱状图',
'menuCode': '124'
}]
},
{
'menuName': '条形图',
'menuCode': '13'
}]
},
{
'id': '2',
'menuName': '树形结构',
'menuCode': '21'
},
{
'id': '3',
'menuName': 'gird分页',
'menuCode': '30'
}] export default {
name: 'items',
props: ['model'],
components: {
myTree
},
data () {
return {
theModel: myData
}
}
}
</script> <style scoped>
.index-wrap {
width: 1200px;
margin: 0 auto;
overflow: hidden;
}
.index-left {
float: left;
width: 300px;
text-align: left;
}
.index-right {
float: left;
width: 900px;
}
.index-left-block, .index-right-block{
height: 450px;
margin: 15px;
background: #fff;
box-shadow: 0 0 1px #ddd;
} .index-left-block h2,.index-right-block h2 {
background: #4fc08d;
color: #fff;
padding: 20px 20px;
font-size: 1.5em;
} .item {
cursor: pointer;
}
ul{
line-height: 40px;
list-style-type: dot;
} li div:active,li div:hover {
background: #9FDABE;
color: #eee;
} ul li:hover {
background: #A6C2B0;
} </style>
4.最重要的一个文件:treeMenu.vue。这个文件里有用到font-awesome,需要大家自行去官网下载。然后将压缩包解压后,放到src的下面。我将文件夹重名为“font-awesome”,然后在<script></script>标签里引用import '../font-awesome/css/font-awesome.min.css'。
/**
* 树的组件,主要功能在这里实现
*
*/
<template> <li>
<div @click="toggle" @dblclick="changeType">
<!-- isFolder判断是否存在子级改变图标 -->
<i v-if="isFolder"uk-animation-="" class="fa " :class="[open?'fa-folder-open':'fa-folder']"></i>
<i v-if="!isFolder" class="fa fa-file-image-o"></i>
{{ model.menuName }}
<i v-if="isFolder" class="fa " :class="[open ? 'fa-chevron-down' : 'fa-chevron-right']" style="display: inline-block;float: right;padding:13px 20px 0 0;"></i>
</div> <ul v-show="open" v-if="isFolder">
<tree-menu v-for="item in model.children" :model="item"></tree-menu>
<li class="add" @click="addChild">
<i class="fa fa-plus-square-o" style="padding-left: 20px;">
<i style="display: inline-block;padding-left: 20px;">add</i>
</i>
</li>
</ul>
</li>
</template> <script>
import '../font-awesome/css/font-awesome.min.css'
import Vue from 'vue'
export default {
name: 'treeMenu',
props: ['model'],
data() {
return {
open: false,
}
},
computed: {
isFolder:function() {
return this.model.children && this.model.children.length
}
},
methods: {
toggle: function() {
if(this.isFolder) {
this.open = !this.open
}
},
changeType: function() {
if(!this.isFolder) {
Vue.set(this.model,'children',[])
this.addChild()
this.open = true
}
},
addChild: function() {
this.model.children.push({
name:'new stuff'
})
}
}
}
</script> <style scoped> ul {
line-height: 40px;
list-style-type: dot;
}
li div:active,li div:hover {
background: #9FDABE;
color: #eee;
} ul li:hover {
background: #A6C2B0;
} .fa-folder-open, .fa-folder, .fa-file-image-o { padding:0 20px;
} </style>
所以处理完之后,就是这样子的啦(echarts是后面加上去的,可以不用管)
我把代码放到github上了,大家可以下载看看(github上的代码包含了echarts,大家注意搭配我的博客看)
https://github.com/yuegreen/vueTree
官网中也有关于树组件的实现,大家可以去参考参考
https://cn.vuejs.org/v2/examples/tree-view.html
如果对本文章有什么问题和建议,欢迎在评论区讨论~
如何用vue实现树形菜单?的更多相关文章
- Vue2 实现树形菜单(多级菜单)功能模块
结构示意图 ├── index.html ├── main.js ├── router │ └── index.js # 路由配置文件 ├── components # 组件目录 │ ├── App. ...
- Vue.js 递归组件实现树形菜单
最近看了 Vue.js 的递归组件,实现了一个最基本的树形菜单. 项目结构: main.js 作为入口,很简单: import Vue from 'vue' Vue.config.debug = tr ...
- 用Vue.js递归组件构建一个可折叠的树形菜单
在Vue.js中一个递归组件调用的是其本身,如: Vue.component('recursive-component', { template: `<!--Invoking myself! ...
- vue js 实现 树形菜单
添加一个模板.<template id="menu-template"> <li v-if="model.nodes!=undefined"& ...
- Vue.js递归组件实现动态树形菜单
使用Vue递归组件实现动态菜单 现在很多项目的菜单都是动态生成的,之前自己做项目也是遇到这种需求,翻看了官网案例,和网上大神的案例.只有两个感觉,官网的案例太简洁,没有什么注释,看起来不太好理解,大神 ...
- vue树形菜单
vue树形菜单 由于项目原因,没有使用ui框架上的树形菜单,所以自己动手并参考大佬的代码写了一个树形菜单的组件,话不多说,直接上代码.html代码js代码直接调用api 把请求到的数据直接赋值给per ...
- SSH框架CRUD+树形菜单案例
今天结合了案例来写ssh的增删改查 表设计 t_ssh_tree t_vue_user book 核心配置文件 struts-base.xml <?xml version="1.0 ...
- jQuery 树形菜单
树形菜单 在 jQuery easyu中其左侧的主菜单使用的是 easyui 中的 tree 组件,不是太熟悉,不过感觉不是太好用. 比如 easyui 中的 tree 需要单击分叉节点前的小三角,才 ...
- JS树形菜单
超全的JS树形菜单源代码共享(有实例图) 树形菜单是很常用的效果,常用在管理软件当中,但是一套树形菜单已经不能满足需求,所以如果能有一套比较全面的树形菜单JS特效代码,将会非常方便,下面懒人萱将超全的 ...
随机推荐
- SqlServer Partition 分区表
分区表 测试版本: Microsoft SQL Server 2014 - 12.0.2000.8 (X64) Feb 20 2014 20:04:26 Copy ...
- 转载:DNS解析过程详解
2015-09-20 此好文是转载,如有侵权联系我,立马删掉 DNS的几个基本概念: 一. 根域 就是所谓的“.”,其实我们的网址www.baidu.com在配置当中应该是www.baidu.com. ...
- Netty入门之HelloWorld
Netty系列入门之HelloWorld(一) 一. 简介 Netty is a NIO client server framework which enables quick and easy de ...
- [Spark性能调优] 第二章:彻底解密Spark的HashShuffle
本課主題 Shuffle 是分布式系统的天敌 Spark HashShuffle介绍 Spark Consolidated HashShuffle介绍 Shuffle 是如何成为 Spark 性能杀手 ...
- poi 读取word文档
1.导入jar包 官网下载地址: https://www.apache.org/dyn/closer.lua/poi/release/bin/poi-bin-3.17-20170915.zip 最开始 ...
- 【费用流】BZOJ1061: [Noi2008]志愿者招募(这题超好)
1061: [Noi2008]志愿者招募 Time Limit: 20 Sec Memory Limit: 162 MBSubmit: 5291 Solved: 3173[Submit][Stat ...
- 转载自 BotVS 「 珍藏版 」如何搭建一个完整的交易框架
[img]http://dn-filebox.qbox.me/8c218c119046b2a25df2d9c7b00c1e0fa6899bdd.png[/img]NO:01 交易策略 ≠ 交易系统. ...
- java web 之 listen 与 filter
一.Listener监听器 Javaweb开发中的监听器,是用于监听web常见对象 HttpServletRequest HttpSession ServletContext 监听它们的创建与销毁.属 ...
- C#学习笔记-组合模式
什么是组合模式? 组合模式(Composite):将对象组合成树形结构以表示“部分-整体”的层次结构. 组合模式使得用户对单个对象和组合对象的使用具有一致性. 何时使用组合模式? 当需求中是体现部分与 ...
- Zabbix实战-简易教程(7)--监控第一台host
一.安装 agent 1.1 Agent分布 1.2 Agent安装 基础模板安装方法: wget -qO- http://zbxinstall.168.com:18888/base/agent-in ...