Vue2 实现树形菜单（多级菜单）功能模块

结构示意图
  1. ├── index.html
  2. ├── main.js
  3. ├── router
  4. │ └── index.js # 路由配置文件
  5. ├── components # 组件目录
  6. │ ├── App.vue # 根组件
  7. │ ├── Home.vue # 大的框架结构组件
  8. │ ├── TreeView.vue
  9. │ ├── TreeViewItem.vue
  10. │ └── TreeDetail.vue
  11. ├── store
  12. ├── index.js # 我们组装模块并导出 store 的地方
  13. ├── modules # 模块目录
  14. └── menusModule.js # 菜单模块

这个多级菜单实现的功能如下：

  • 1、可展示多级菜单，理论上可以展无限级菜单
  • 2、当前菜单高亮功能
  • 3、刷新后依然会自动定位到上一次点击的菜单，即使这个是子菜单，并且父菜单会自动展开
  • 4、子菜单的显示隐藏有收起、展开，同时带有淡入效果

这个例子用到的知识点：路由、状态管理、组件。

状态管理安装：

  1. npm install --save vuex

更多关于 vuex 的介绍可以看官方文档：https://vuex.vuejs.org/zh-cn/。

我们先来看看效果演示图：

Vue 实现树形菜单（多级菜单）功能模块

程序员是用代码来沟通的，所以费话不多说，直接上码：

index.html
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width,initial-scale=1.0">
  6. <title>Vue 实现树形菜单（多级菜单）功能模块- 云库网</title>
  7. </head>
  8. <body>
  9. <div id="app"></div>
  10. </body>
  11. </html>
main.js
  1. import Vue from 'vue'
  2. import App from './components/App'
  3. import router from './router'
  4. import store from './store/index'
  5. Vue.config.productionTip = false
  6. /* eslint-disable no-new */
  7. new Vue({
  8. el: '#app',
  9. router,
  10. store,
  11. components: {
  12. App
  13. },
  14. template: '<App/>'
  15. })

在 main.js 中引入 路由和状态管理配置

App.vue
  1. <template>
  2. <div id="app">
  3. <Home></Home>
  4. </div>
  5. </template>
  6. <script>
  7. import Home from "./Home";
  8. export default {
  9. components: {
  10. Home
  11. },
  12. name: "App"
  13. };
  14. </script>
  15. <style>
  16. * {
  17. padding: 0;
  18. margin: 0;
  19. }
  20. #app {
  21. font-family: "Avenir", Helvetica, Arial, sans-serif;
  22. -webkit-font-smoothing: antialiased;
  23. -moz-osx-font-smoothing: grayscale;
  24. color: #2c3e50;
  25. }
  26. html,
  27. body,
  28. #app,
  29. .home {
  30. height: 100%;
  31. }
  32. html,
  33. body {
  34. overflow: hidden;
  35. }
  36. </style>
Home.vue
  1. <template>
  2. <div class="home">
  3. <div class="side-bar">
  4. <Tree-view></Tree-view>
  5. </div>
  6. <div class="continer">
  7. <router-view></router-view>
  8. </div>
  9. </div>
  10. </template>
  11. <script>
  12. import TreeView from "./TreeView";
  13. export default {
  14. components: {
  15. TreeView
  16. },
  17. name: "Home"
  18. };
  19. </script>
  20. <style scoped>
  21. .side-bar {
  22. width: 300px;
  23. height: 100%;
  24. overflow-y: auto;
  25. overflow-x: hidden;
  26. font-size: 14px;
  27. position: absolute;
  28. top: 0;
  29. left: 0;
  30. }
  31. .continer {
  32. padding-left: 320px;
  33. }
  34. </style>

这个 Home.vue 主要是用来完成页面的大框架结构。

TreeView.vue
  1. <template>
  2. <div class="tree-view-menu">
  3. <Tree-view-item :menus='menus'></Tree-view-item>
  4. </div>
  5. </template>
  6. <script>
  7. import TreeViewItem from "./TreeViewItem";
  8. const menusData = [];
  9. export default {
  10. components: {
  11. TreeViewItem
  12. },
  13. name: "TreeViewMenu",
  14. data() {
  15. return {
  16. menus: this.$store.state.menusModule.menus
  17. };
  18. }
  19. };
  20. </script>
  21. <style scoped>
  22. .tree-view-menu {
  23. width: 300px;
  24. height: 100%;
  25. overflow-y: auto;
  26. overflow-x: hidden;
  27. }
  28. .tree-view-menu::-webkit-scrollbar {
  29. height: 6px;
  30. width: 6px;
  31. }
  32. .tree-view-menu::-webkit-scrollbar-trac {
  33. -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  34. box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  35. }
  36. .tree-view-menu::-webkit-scrollbar-thumb {
  37. background-color: #6e6e6e;
  38. outline: 1px solid #333;
  39. }
  40. .tree-view-menu::-webkit-scrollbar {
  41. height: 4px;
  42. width: 4px;
  43. }
  44. .tree-view-menu::-webkit-scrollbar-track {
  45. -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  46. box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  47. }
  48. .tree-view-menu::-webkit-scrollbar-thumb {
  49. background-color: #6e6e6e;
  50. outline: 1px solid #708090;
  51. }
  52. </style>

这个组件也非常地简单，拿到菜单数据，传给子组件，并把菜单的滚动条样式修改了下。

TreeViewItem.vue
  1. <template>
  2. <div class="tree-view-item">
  3. <div class="level" :class="'level-'+ menu.level" v-for="menu in menus" :key="menu.id">
  4. <div v-if="menu.type === 'link'">
  5. <router-link class="link" v-bind:to="menu.url" @click.native="toggle(menu)">{{menu.name}}</router-link>
  6. </div>
  7. <div v-if="menu.type === 'button'">
  8. <div class="button heading" :class="{selected: menu.isSelected,expand:menu.isExpanded}" @click="toggle(menu)">
  9. {{menu.name}}
  10. <div class="icon">
  11. <svg xmlns="http://www.w3.org/2000/svg" focusable="false" viewBox="0 0 24 24">
  12. <path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z "></path>
  13. </svg>
  14. </div>
  15. </div>
  16. <transition name="fade">
  17. <div class="heading-children" v-show="menu.isExpanded" v-if="menu.subMenu">
  18. <Tree-view-item :menus='menu.subMenu'></Tree-view-item>
  19. </div>
  20. </transition>
  21. </div>
  22. </div>
  23. </div>
  24. </template>
  25. <script>
  26. export default {
  27. name: "TreeViewItem",
  28. props: ["menus"],
  29. created() {
  30. this.$store.commit("firstInit", { url: this.$route.path });
  31. },
  32. methods: {
  33. toggle(menu) {
  34. this.$store.commit("findParents", { menu });
  35. }
  36. }
  37. };
  38. </script>
  39. <style scoped>
  40. a {
  41. text-decoration: none;
  42. color: #333;
  43. }
  44. .link,
  45. .button {
  46. display: block;
  47. padding: 10px 15px;
  48. transition: background-color 0.2s ease-in-out 0s, color 0.3s ease-in-out 0.1s;
  49. -moz-user-select: none;
  50. -webkit-user-select: none;
  51. -ms-user-select: none;
  52. -khtml-user-select: none;
  53. user-select: none;
  54. }
  55. .button {
  56. position: relative;
  57. }
  58. .link:hover,
  59. .button:hover {
  60. color: #1976d2;
  61. background-color: #eee;
  62. cursor: pointer;
  63. }
  64. .icon {
  65. position: absolute;
  66. right: 0;
  67. display: inline-block;
  68. height: 24px;
  69. width: 24px;
  70. fill: currentColor;
  71. transition: -webkit-transform 0.15s;
  72. transition: transform 0.15s;
  73. transition: transform 0.15s, -webkit-transform 0.15s;
  74. transition-timing-function: ease-in-out;
  75. }
  76. .heading-children {
  77. padding-left: 14px;
  78. overflow: hidden;
  79. }
  80. .expand {
  81. display: block;
  82. }
  83. .collapsed {
  84. display: none;
  85. }
  86. .expand .icon {
  87. -webkit-transform: rotate(90deg);
  88. transform: rotate(90deg);
  89. }
  90. .selected {
  91. color: #1976d2;
  92. }
  93. .fade-enter-active {
  94. transition: all 0.5s ease 0s;
  95. }
  96. .fade-enter {
  97. opacity: 0;
  98. }
  99. .fade-enter-to {
  100. opacity: 1;
  101. }
  102. .fade-leave-to {
  103. height: 0;
  104. }
  105. </style>

上面的这个组件才是这个树型结构重点代码，用了递归的思想来实现这个树型菜单。

TreeViewDetail.vue
  1. <template>
  2. <h3>
  3. 这里是{{currentRoute}}导航详情
  4. </h3>
  5. </template>
  6. <script>
  7. export default {
  8. name: "TreeViewDetail",
  9. data() {
  10. return {
  11. currentRoute: this.$route.path
  12. };
  13. },
  14. watch: {
  15. //监听路由，只要路由有变化(路径，参数等变化)都有执行下面的函数
  16. $route: {
  17. handler: function(val, oldVal) {
  18. this.currentRoute = val.name;
  19. },
  20. deep: true
  21. }
  22. }
  23. };
  24. </script>
  25. <style scoped>
  26. h3 {
  27. margin-top: 10px;
  28. font-weight: normal;
  29. }
  30. </style>
router/index.js
  1. import Vue from 'vue';
  2. import Router from 'vue-router';
  3. import App from '@/components/App';
  4. import TreeViewDetail from '@/components/TreeViewDetail';
  6. Vue.use(Router)
  8. export default new Router({
  9. linkActiveClass: 'selected',
  10. routes: [{
  11. path: '/',
  12. name: 'App',
  13. component: App
  14. },
  15. {
  16. path: '/detail/quickstart',
  17. name: 'quickstart',
  18. component: TreeViewDetail
  19. },
  20. {
  21. path: '/detail/tutorial',
  22. name: 'tutorial',
  23. component: TreeViewDetail
  24. },
  25. {
  26. path: '/detail/toh-pt1',
  27. name: 'toh-pt1',
  28. component: TreeViewDetail
  29. },
  30. {
  31. path: '/detail/toh-pt2',
  32. name: 'toh-pt2',
  33. component: TreeViewDetail
  34. },
  35. {
  36. path: '/detail/toh-pt3',
  37. name: 'toh-pt3',
  38. component: TreeViewDetail
  39. },
  40. {
  41. path: '/detail/toh-pt4',
  42. name: 'toh-pt4',
  43. component: TreeViewDetail
  44. },
  45. {
  46. path: '/detail/toh-pt5',
  47. name: 'toh-pt5',
  48. component: TreeViewDetail
  49. },
  50. {
  51. path: '/detail/toh-pt6',
  52. name: 'toh-pt6',
  53. component: TreeViewDetail
  54. },
  55. {
  56. path: '/detail/architecture',
  57. name: 'architecture',
  58. component: TreeViewDetail
  59. },
  60. {
  61. path: '/detail/displaying-data',
  62. name: 'displaying-data',
  63. component: TreeViewDetail
  64. },
  65. {
  66. path: '/detail/template-syntax',
  67. name: 'template-syntax',
  68. component: TreeViewDetail
  69. },
  70. {
  71. path: '/detail/lifecycle-hooks',
  72. name: 'lifecycle-hooks',
  73. component: TreeViewDetail
  74. },
  75. {
  76. path: '/detail/component-interaction',
  77. name: 'component-interaction',
  78. component: TreeViewDetail
  79. },
  80. {
  81. path: '/detail/component-styles',
  82. name: 'component-styles',
  83. component: TreeViewDetail
  84. },
  85. {
  86. path: '/detail/dynamic-component-loader',
  87. name: 'dynamic-component-loader',
  88. component: TreeViewDetail
  89. },
  90. {
  91. path: '/detail/attribute-directives',
  92. name: 'attribute-directives',
  93. component: TreeViewDetail
  94. },
  95. {
  96. path: '/detail/structural-directives',
  97. name: 'structural-directives',
  98. component: TreeViewDetail
  99. },
  100. {
  101. path: '/detail/pipes',
  102. name: 'pipes',
  103. component: TreeViewDetail
  104. },
  105. {
  106. path: '/detail/animations',
  107. name: 'animations',
  108. component: TreeViewDetail
  109. },
  110. {
  111. path: '/detail/user-input',
  112. name: 'user-input',
  113. component: TreeViewDetail
  114. },
  115. {
  116. path: '/detail/forms',
  117. name: 'forms',
  118. component: TreeViewDetail
  119. },
  120. {
  121. path: '/detail/form-validation',
  122. name: 'form-validation',
  123. component: TreeViewDetail
  124. },
  125. {
  126. path: '/detail/reactive-forms',
  127. name: 'reactive-forms',
  128. component: TreeViewDetail
  129. },
  130. {
  131. path: '/detail/dynamic-form',
  132. name: 'dynamic-form',
  133. component: TreeViewDetail
  134. },
  135. {
  136. path: '/detail/bootstrapping',
  137. name: 'bootstrapping',
  138. component: TreeViewDetail
  139. },
  140. {
  141. path: '/detail/ngmodule',
  142. name: 'ngmodule',
  143. component: TreeViewDetail
  144. },
  145. {
  146. path: '/detail/ngmodule-faq',
  147. name: 'ngmodule-faq',
  148. component: TreeViewDetail
  149. },
  150. {
  151. path: '/detail/dependency-injection',
  152. name: 'dependency-injection',
  153. component: TreeViewDetail
  154. },
  155. {
  156. path: '/detail/hierarchical-dependency-injection',
  157. name: 'hierarchical-dependency-injection',
  158. component: TreeViewDetail
  159. },
  160. {
  161. path: '/detail/dependency-injection-in-action',
  162. name: 'dependency-injection-in-action',
  163. component: TreeViewDetail
  164. },
  165. {
  166. path: '/detail/http',
  167. name: 'http',
  168. component: TreeViewDetail
  169. },
  170. {
  171. path: '/detail/router',
  172. name: 'router',
  173. component: TreeViewDetail
  174. },
  175. {
  176. path: '/detail/testing',
  177. name: 'testing',
  178. component: TreeViewDetail
  179. },
  180. {
  181. path: '/detail/cheatsheet',
  182. name: 'cheatsheet',
  183. component: TreeViewDetail
  184. },
  185. {
  186. path: '/detail/i18n',
  187. name: 'i18n',
  188. component: TreeViewDetail
  189. },
  190. {
  191. path: '/detail/language-service',
  192. name: 'language-service',
  193. component: TreeViewDetail
  194. },
  195. {
  196. path: '/detail/security',
  197. name: 'security',
  198. component: TreeViewDetail
  199. },
  200. {
  201. path: '/detail/setup',
  202. name: 'setup',
  203. component: TreeViewDetail
  204. },
  205. {
  206. path: '/detail/setup-systemjs-anatomy',
  207. name: 'setup-systemjs-anatomy',
  208. component: TreeViewDetail
  209. },
  210. {
  211. path: '/detail/browser-support',
  212. name: 'browser-support',
  213. component: TreeViewDetail
  214. },
  215. {
  216. path: '/detail/npm-packages',
  217. name: 'npm-packages',
  218. component: TreeViewDetail
  219. },
  220. {
  221. path: '/detail/typescript-configuration',
  222. name: 'typescript-configuration',
  223. component: TreeViewDetail
  224. },
  225. {
  226. path: '/detail/aot-compiler',
  227. name: 'aot-compiler',
  228. component: TreeViewDetail
  229. },
  230. {
  231. path: '/detail/metadata',
  232. name: 'metadata',
  233. component: TreeViewDetail
  234. },
  235. {
  236. path: '/detail/deployment',
  237. name: 'deployment',
  238. component: TreeViewDetail
  239. },
  240. {
  241. path: '/detail/upgrade',
  242. name: 'upgrade',
  243. component: TreeViewDetail
  244. },
  245. {
  246. path: '/detail/ajs-quick-reference',
  247. name: 'ajs-quick-reference',
  248. component: TreeViewDetail
  249. },
  250. {
  251. path: '/detail/visual-studio-2015',
  252. name: 'visual-studio-2015',
  253. component: TreeViewDetail
  254. },
  255. {
  256. path: '/detail/styleguide',
  257. name: 'styleguide',
  258. component: TreeViewDetail
  259. },
  260. {
  261. path: '/detail/glossary',
  262. name: 'glossary',
  263. component: TreeViewDetail
  264. },
  265. {
  266. path: '/detail/api',
  267. name: 'api',
  268. component: TreeViewDetail
  269. }
  270. ]
  271. })
store/module/menusModule.js
  1. let menus = [
  2. { id: 1, level: 1, name: '快速上手', type: "link", url: "/detail/quickstart" },
  3. {
  4. id: 2,
  5. level: 1,
  6. name: '教程',
  7. type: "button",
  8. isExpanded: false,
  9. isSelected: false,
  10. subMenu: [
  11. { id: 21, level: 2, name: '简介', type: "link", url: "/detail/tutorial" },
  12. { id: 22, level: 2, name: '英雄编辑器', type: "link", url: "/detail/toh-pt1" },
  13. { id: 23, level: 2, name: '主从结构', type: "link", url: "/detail/toh-pt2" },
  14. { id: 24, level: 2, name: '多个组件', type: "link", url: "/detail/toh-pt3" },
  15. { id: 25, level: 2, name: '服务', type: "link", url: "/detail/toh-pt4" },
  16. { id: 26, level: 2, name: '路由', type: "link", url: "/detail/toh-pt5" },
  17. { id: 27, level: 2, name: 'HTTP', type: "link", url: "/detail/toh-pt6" },
  18. ]
  19. },
  20. {
  21. id: 3,
  22. level: 1,
  23. name: '核心知识',
  24. type: "button",
  25. isExpanded: false,
  26. isSelected: false,
  27. subMenu: [
  28. { id: 31, level: 2, name: '架构', type: "link", url: "/detail/architecture" },
  29. {
  30. id: 32,
  31. level: 2,
  32. name: '模板与数据绑定',
  33. type: "button",
  34. isExpanded: false,
  35. isSelected: false,
  36. subMenu: [
  37. { id: 321, level: 3, name: '显示数据', type: "link", url: "/detail/displaying-data" },
  38. { id: 322, level: 3, name: '模板语法', type: "link", url: "/detail/template-syntax" },
  39. { id: 323, level: 3, name: '生命周期钩子', type: "link", url: "/detail/lifecycle-hooks" },
  40. { id: 324, level: 3, name: '组件交互', type: "link", url: "/detail/component-interaction" },
  41. { id: 325, level: 3, name: '组件样式', type: "link", url: "/detail/component-styles" },
  42. { id: 326, level: 3, name: '动态组件', type: "link", url: "/detail/dynamic-component-loader" },
  43. { id: 327, level: 3, name: '属性型指令', type: "link", url: "/detail/attribute-directives" },
  44. { id: 328, level: 3, name: '结构型指令', type: "link", url: "/detail/structural-directives" },
  45. { id: 329, level: 3, name: '管道', type: "link", url: "/detail/pipes" },
  46. { id: 3210, level: 3, name: '动画', type: "link", url: "/detail/animations" },
  47. ]
  48. },
  49. {
  50. id: 33,
  51. level: 2,
  52. name: '表单',
  53. type: "button",
  54. isExpanded: false,
  55. isSelected: false,
  56. subMenu: [
  57. { name: '用户输入', type: "link", url: "/detail/user-input" },
  58. { name: '模板驱动表单', type: "link", url: "/detail/forms" },
  59. { name: '表单验证', type: "link", url: "/detail/form-validation" },
  60. { name: '响应式表单', type: "link", url: "/detail/reactive-forms" },
  61. { name: '动态表单', type: "link", url: "/detail/dynamic-form" }
  62. ]
  63. },
  64. { id: 34, level: 2, name: '引用启动', type: "link", url: "/detail/bootstrapping" },
  65. {
  66. id: 35,
  67. level: 2,
  68. name: 'NgModules',
  69. type: "button",
  70. isExpanded: false,
  71. isSelected: false,
  72. subMenu: [
  73. { id: 341, level: 3, name: 'NgModule', type: "link", url: "/detail/ngmodule" },
  74. { id: 342, level: 3, name: 'NgModule 常见问题', type: "link", url: "/detail/ngmodule-faq" }
  75. ]
  76. },
  77. {
  78. id: 36,
  79. level: 2,
  80. name: '依赖注入',
  81. type: "button",
  82. isExpanded: false,
  83. isSelected: false,
  84. subMenu: [
  85. { id: 361, level: 3, name: '依赖注入', type: "link", url: "/detail/dependency-injection" },
  86. { id: 362, level: 3, name: '多级注入器', type: "link", url: "/detail/hierarchical-dependency-injection" },
  87. { id: 363, level: 3, name: 'DI 实例技巧', type: "link", url: "/detail/dependency-injection-in-action" }
  88. ]
  89. },
  90. { id: 37, level: 2, name: 'HttpClient', type: "link", url: "/detail/http" },
  91. { id: 38, level: 2, name: '路由与导航', type: "link", url: "/detail/router" },
  92. { id: 39, level: 2, name: '测试', type: "link", url: "/detail/testing" },
  93. { id: 310, level: 2, name: '速查表', type: "link", url: "/detail/cheatsheet" },
  94. ]
  95. },
  96. {
  97. id: 4,
  98. level: 1,
  99. name: '其它技术',
  100. type: "button",
  101. isExpanded: false,
  102. isSelected: false,
  103. subMenu: [
  104. { id: 41, level: 2, name: '国际化（i18n）', type: "link", url: "/detail/i18n" },
  105. { id: 42, level: 2, name: '语言服务', type: "link", url: "/detail/language-service" },
  106. { id: 43, level: 2, name: '安全', type: "link", url: "/detail/security" },
  107. {
  108. id: 44,
  109. level: 2,
  110. name: '环境设置与部署',
  111. type: "button",
  112. isExpanded: false,
  113. isSelected: false,
  114. subMenu: [
  115. { id: 441, level: 3, name: '搭建本地开发环境', type: "link", url: "/detail/setup" },
  116. { id: 442, level: 3, name: '搭建方式剖析', type: "link", url: "/detail/setup-systemjs-anatomy" },
  117. { id: 443, level: 3, name: '浏览器支持', type: "link", url: "/detail/browser-support" },
  118. { id: 444, level: 3, name: 'npm 包', type: "link", url: "/detail/npm-packages" },
  119. { id: 445, level: 3, name: 'TypeScript 配置', type: "link", url: "/detail/typescript-configuration" },
  120. { id: 446, level: 3, name: '预 (AoT) 编译器', type: "link", url: "/detail/aot-compiler" },
  121. { id: 447, level: 3, name: '预 (AoT) 编译器', type: "link", url: "/detail/metadata" },
  122. { id: 448, level: 3, name: '部署', type: "link", url: "/detail/deployment" }
  123. ]
  124. },
  125. {
  126. id: 45,
  127. level: 2,
  128. name: '升级',
  129. type: "button",
  130. isExpanded: false,
  131. isSelected: false,
  132. subMenu: [
  133. { id: 451, level: 3, name: '从 AngularJS 升级', type: "link", url: "/detail/upgrade" },
  134. { id: 452, level: 3, name: '升级速查表', type: "link", url: "/detail/ajs-quick-reference" }
  135. ]
  136. },
  137. { id: 46, level: 2, name: 'Visual Studio 2015 快速上手', type: "link", url: "/detail/visual-studio-2015" },
  138. { id: 47, level: 2, name: '风格指南', type: "link", url: "/detail/styleguide" },
  139. { id: 48, level: 2, name: '词汇表', type: "link", url: "/detail/glossary" }
  140. ]
  141. },
  142. { id: 5, level: 1, name: 'API 参考手册', type: "link", url: "/detail/api" }
  143. ];
  144. let levelNum = 1;
  145. let startExpand = []; // 保存刷新后当前要展开的菜单项
  146. function setExpand(source, url) {
  147. let sourceItem = '';
  148. for (let i = 0; i < source.length; i++) {
  149. sourceItem = JSON.stringify(source[i]); // 把菜单项转为字符串
  150. if (sourceItem.indexOf(url) > -1) { // 查找当前 URL 所对应的子菜单属于哪一个祖先菜单
  151. if (source[i].type === 'button') { // 导航菜单为按钮
  152. source[i].isSelected = true; // 设置选中高亮
  153. source[i].isExpanded = true; // 设置为展开
  154. startExpand.push(source[i]);
  155. // 递归下一级菜单，以此类推
  156. setExpand(source[i].subMenu, url);
  157. }
  158. break;
  159. }
  160. }
  161. }
  162. const state = {
  163. menus,
  164. levelNum
  165. };
  166. const mutations = {
  167. findParents(state, payload) {
  168. if (payload.menu.type === "button") {
  169. payload.menu.isExpanded = !payload.menu.isExpanded;
  170. } else if (payload.menu.type === "link") {
  171. if (startExpand.length > 0) {
  172. for (let i = 0; i < startExpand.length; i++) {
  173. startExpand[i].isSelected = false;
  174. }
  175. }
  176. startExpand = []; // 清空展开菜单记录项
  177. setExpand(state.menus, payload.menu.url);
  178. };
  179. },
  180. firstInit(state, payload) {
  181. setExpand(state.menus, payload.url);
  182. }
  183. }
  184. export default {
  185. state,
  186. mutations
  187. };

在使用状态管理时，我们一定要记住，一旦数据写到了 state 中时，就不能再添加其它属性了，什么时间？就拿上面的 menus 数据来说，比如，本来菜单数据中没有 isExpanded 这个字段的,然后你在 mutations 的方法中给 menus 对象添加了一个 isExpanded 属性，但你会发现属性是不会被状态管理追踪到的，所以我们一开始就给这个数据添加了 isExpanded 和 isSelected 。

store/index.js
  1. import Vue from 'vue'
  2. import Vuex from 'vuex'
  3. import menusModule from './module/menusModule'
  4. Vue.use(Vuex);
  6. const store = new Vuex.Store({
  7. modules: {
  8. menusModule
  9. }
  10. })
  12. export default store;

上面这个例子在使用状态管理时，把菜单的相关配置封装成模块，然后再引入。如果把状态管理写成模块的形式的话，在调用这个模块中的状态时就需要注意了，写法可以参数示例中的代码。

上面这个例子可以直接用到自己的项目中，只要你理解了其中的思想，其他的都不是问题。Vue 实现树形菜单功能模块之旅只能带你到这里了。

posted on 2018-08-08 17:09  啊哈哈哈哈-  阅读(38720)  评论(4)    收藏  举报

博客园  ©  2004-2025
浙公网安备 33010602011771号 浙ICP备2021040463号-3