caihg

?

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>

就這么簡單。這篇文章還真沒什么可寫的，權當記錄吧。

截圖效果如下：

項目代碼在這里。

?

?

?

?

?

caihg

?

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：

+ View Code

webpack.config.js：

+ View Code

項目的入口 js 文件 main.js：

+ View Code

該文件引用了路由配置文件 routes.js 和主入口的組件 main.vue，其中 main.vue 在 components 目錄

?

routes.js 內容如下：

+ View Code

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 目錄，內容如下：

+ View Code

在登錄事件中，將用戶名傳遞給 store 中的 state.username，以便在其它組件中獲取：?

store.state.username = this.loginForm.username

?

登錄后的界面，默認跳轉到主頁：

?

通過 vuex 獲取到了登錄的用戶名稱（caihg）；當然，如果刷新當前頁面，用戶名稱就沒了。?

頭部在 container 目錄，其中有三個組件

container.vue 的內容如下：

+ View Code

headerNav.vue 中就是頭部導航的各種鏈接：

+ View Code

?

點擊頭部的導航，下面的內容相應地切換

?其中左側部分也是導航，點擊也要跟隨切換

左側的導航放在 asideContainer 目錄

?platform.vue 與?product.vue 內容相似；只是前者包括了樣式，后者沒有（相同的樣式寫一份就夠了，如果多寫了，也會重復渲染）

+ View Code + View Code

?

左側導航對應的內容分別在不同的目錄（根據功能劃分）

userList.vue 中的內容如下：

<template><div>用戶列表的內容</div> </template>

至此完成，后臺管理系統的大致骨架就是這樣了。

項目代碼在 github 上

總結

以上是生活随笔為你收集整理的VUE 意淫笔记的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。