VUE 意淫笔记
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 Codewebpack.config.js：
+ View Code項目的入口 js 文件 main.js：
+ View Code該文件引用了路由配置文件 routes.js 和主入口的組件 main.vue，其中 main.vue 在 components 目錄
?
routes.js 內容如下：
+ View Codemain.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 CodeheaderNav.vue 中就是頭部導航的各種鏈接：
+ View Code?
點擊頭部的導航，下面的內容相應地切換
?其中左側部分也是導航，點擊也要跟隨切換
左側的導航放在 asideContainer 目錄
?platform.vue 與?product.vue 內容相似；只是前者包括了樣式，后者沒有（相同的樣式寫一份就夠了，如果多寫了，也會重復渲染）
+ View Code + View Code?
左側導航對應的內容分別在不同的目錄（根據功能劃分）
userList.vue 中的內容如下：
<template><div>用戶列表的內容</div> </template>至此完成，后臺管理系統的大致骨架就是這樣了。
項目代碼在 github 上
總結
- 上一篇： ionic 弹窗（alert, conf
- 下一篇： half extents