Vue.js 递归组件实现树形菜单
最近看了 Vue.js 的递归组件,实现了一个最基本的树形菜单。
项目结构:
main.js 作为入口,很简单:
1
2
3
4
5
6
7
8
9
|
import Vue from \'vue\' Vue.config.debug = true import main from \'./components/main.vue\' new Vue({ el: \'#app\' , render: h => h(main) }) |
它引入了一个组件 main.vue:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
|
<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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
|
<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 2.0 + Vue Router + Vuex
用 Vue.js 2.x 与相配套的 Vue Router、Vuex 搭建了一个最基本的后台管理系统的骨架。
当然先要安装 node.js(包括了 npm)、vue-cli
项目结构如图所示:
assets 中是静态资源,components 中是组件(以 .vue 为后缀名的文件),store 中是使用了 vuex 的 js 文件。
package.json:
webpack.config.js:
项目的入口 js 文件 main.js:
该文件引用了路由配置文件 routes.js 和主入口的组件 main.vue,其中 main.vue 在 components 目录
routes.js 内容如下:
main.vue 的内容如下:
<template> <router-view></router-view> </template>
store.js 在 store 目录,内容如下:
1
2
3
4
5
6
7
8
9
10
|
import Vue from \'vue\' import Vuex from \'vuex\' Vue.use(Vuex) export default new Vuex.Store({ state: { username: \'\' } }) |
后台都是登录成功后跳转到主页面
界面的 UI 用的是开源的 element-ui
login.vue 位于 login 目录,内容如下:
在登录事件中,将用户名传递给 store 中的 state.username,以便在其它组件中获取:
store.state.username = this.loginForm.username
登录后的界面,默认跳转到主页:
通过 vuex 获取到了登录的用户名称(caihg);当然,如果刷新当前页面,用户名称就没了。
头部在 container 目录,其中有三个组件
container.vue 的内容如下:
headerNav.vue 中就是头部导航的各种链接:
点击头部的导航,下面的内容相应地切换
其中左侧部分也是导航,点击也要跟随切换
左侧的导航放在 asideContainer 目录
platform.vue 与 product.vue 内容相似;只是前者包括了样式,后者没有(相同的样式写一份就够了,如果多写了,也会重复渲染)
左侧导航对应的内容分别在不同的目录(根据功能划分)
userList.vue 中的内容如下:
<template> <div> 用户列表的内容 </div> </template>
至此完成,后台管理系统的大致骨架就是这样了。
项目代码在 github 上