Browse Source

refactor:change layout

Pan 7 years ago
parent
commit
4332f02642

+ 4 - 2
src/views/layout/Levelbar.vue

1
 <template>
1
 <template>
2
-  <el-breadcrumb class="app-levelbar" separator="/">
2
+  <el-breadcrumb class="app-breadcrumb" separator="/">
3
+  <transition-group name="breadcrumb">
3
     <el-breadcrumb-item v-for="(item,index)  in levelList" :key="item.path">
4
     <el-breadcrumb-item v-for="(item,index)  in levelList" :key="item.path">
4
       <router-link v-if='item.redirect==="noredirect"||index==levelList.length-1' to="" class="no-redirect">{{item.name}}</router-link>
5
       <router-link v-if='item.redirect==="noredirect"||index==levelList.length-1' to="" class="no-redirect">{{item.name}}</router-link>
5
       <router-link v-else :to="item.redirect||item.path">{{item.name}}</router-link>
6
       <router-link v-else :to="item.redirect||item.path">{{item.name}}</router-link>
6
     </el-breadcrumb-item>
7
     </el-breadcrumb-item>
8
+     </transition-group>
7
   </el-breadcrumb>
9
   </el-breadcrumb>
8
 </template>
10
 </template>
9
 
11
 
36
 </script>
38
 </script>
37
 
39
 
38
 <style rel="stylesheet/scss" lang="scss" scoped>
40
 <style rel="stylesheet/scss" lang="scss" scoped>
39
-.app-levelbar.el-breadcrumb {
41
+.app-breadcrumb.el-breadcrumb {
40
   display: inline-block;
42
   display: inline-block;
41
   font-size: 14px;
43
   font-size: 14px;
42
   line-height: 50px;
44
   line-height: 50px;

+ 1 - 1
src/views/layout/Layout.vue

12
 
12
 
13
 
13
 
14
 <script>
14
 <script>
15
-import { Navbar, Sidebar, AppMain } from '@/views/layout'
15
+import { Navbar, Sidebar, AppMain } from '@/views/layout/components'
16
 
16
 
17
 export default {
17
 export default {
18
   name: 'layout',
18
   name: 'layout',

src/views/layout/AppMain.vue → src/views/layout/components/AppMain.vue


+ 6 - 4
src/views/layout/Navbar.vue

1
 <template>
1
 <template>
2
   <el-menu class="navbar" mode="horizontal">
2
   <el-menu class="navbar" mode="horizontal">
3
     <hamburger class="hamburger-container" :toggleClick="toggleSideBar" :isActive="sidebar.opened"></hamburger>
3
     <hamburger class="hamburger-container" :toggleClick="toggleSideBar" :isActive="sidebar.opened"></hamburger>
4
-    <levelbar></levelbar>
4
+    <breadcrumb></breadcrumb>
5
     <el-dropdown class="avatar-container" trigger="click">
5
     <el-dropdown class="avatar-container" trigger="click">
6
       <div class="avatar-wrapper">
6
       <div class="avatar-wrapper">
7
         <img class="user-avatar" :src="avatar+'?imageView2/1/w/80/h/80'">
7
         <img class="user-avatar" :src="avatar+'?imageView2/1/w/80/h/80'">
13
             Home
13
             Home
14
           </el-dropdown-item>
14
           </el-dropdown-item>
15
         </router-link>
15
         </router-link>
16
-        <el-dropdown-item divided><span @click="logout" style="display:block;">LogOut</span></el-dropdown-item>
16
+        <el-dropdown-item divided>
17
+          <span @click="logout" style="display:block;">LogOut</span>
18
+        </el-dropdown-item>
17
       </el-dropdown-menu>
19
       </el-dropdown-menu>
18
     </el-dropdown>
20
     </el-dropdown>
19
   </el-menu>
21
   </el-menu>
21
 
23
 
22
 <script>
24
 <script>
23
 import { mapGetters } from 'vuex'
25
 import { mapGetters } from 'vuex'
24
-import Levelbar from './Levelbar'
26
+import Breadcrumb from '@/components/Breadcrumb'
25
 import Hamburger from '@/components/Hamburger'
27
 import Hamburger from '@/components/Hamburger'
26
 
28
 
27
 export default {
29
 export default {
28
   components: {
30
   components: {
29
-    Levelbar,
31
+    Breadcrumb,
30
     Hamburger
32
     Hamburger
31
   },
33
   },
32
   computed: {
34
   computed: {

src/views/layout/SidebarItem.vue → src/views/layout/components/Sidebar/SidebarItem.vue


src/views/layout/Sidebar.vue → src/views/layout/components/Sidebar/index.vue


+ 0 - 4
src/views/layout/index.js

1
 export { default as Navbar } from './Navbar'
1
 export { default as Navbar } from './Navbar'
2
-
3
 export { default as Sidebar } from './Sidebar'
2
 export { default as Sidebar } from './Sidebar'
4
-
5
-export { default as Levelbar } from './Levelbar'
6
-
7
 export { default as AppMain } from './AppMain'
3
 export { default as AppMain } from './AppMain'