EventBus折叠改为链式调用

src/components/common/Header.vue

@@ -38,9 +38,6 @@
                         <i class="el-icon-caret-bottom"></i>
                     </span>
                     <el-dropdown-menu slot="dropdown">
-                        <a href="http://blog.gdfengshuo.com/about/" target="_blank">
-                            <el-dropdown-item>关于作者</el-dropdown-item>
-                        </a>
                         <a href="https://github.com/lin-xin/vue-manage-system" target="_blank">
                             <el-dropdown-item>项目仓库</el-dropdown-item>
                         </a>

src/components/common/Home.vue

@@ -17,33 +17,35 @@
 </template>
 
 <script>
-    import vHead from './Header.vue';
-    import vSidebar from './Sidebar.vue';
-    import vTags from './Tags.vue';
-    import bus from './bus';
-    export default {
-        data(){
-            return {
-                tagsList: [],
-                collapse: false
-            }
-        },
-        components:{
-            vHead, vSidebar, vTags
-        },
-        created(){
-            bus.$on('collapse', msg => {
-                this.collapse = msg;
-            })
+import vHead from './Header.vue';
+import vSidebar from './Sidebar.vue';
+import vTags from './Tags.vue';
+import bus from './bus';
+export default {
+    data() {
+        return {
+            tagsList: [],
+            collapse: false
+        };
+    },
+    components: {
+        vHead,
+        vSidebar,
+        vTags
+    },
+    created() {
+        bus.$on('collapse-content', msg => {
+            this.collapse = msg;
+        });
 
-            // 只有在标签页列表里的页面才使用keep-alive，即关闭标签之后就不保存到内存中了。
-            bus.$on('tags', msg => {
-                let arr = [];
-                for(let i = 0, len = msg.length; i < len; i ++){
-                    msg[i].name && arr.push(msg[i].name);
-                }
-                this.tagsList = arr;
-            })
-        }
+        // 只有在标签页列表里的页面才使用keep-alive，即关闭标签之后就不保存到内存中了。
+        bus.$on('tags', msg => {
+            let arr = [];
+            for (let i = 0, len = msg.length; i < len; i++) {
+                msg[i].name && arr.push(msg[i].name);
+            }
+            this.tagsList = arr;
+        });
     }
+};
 </script>

src/components/common/Sidebar.vue

@@ -1,29 +1,47 @@
 <template>
     <div class="sidebar">
-        <el-menu class="sidebar-el-menu" :default-active="onRoutes" :collapse="collapse" background-color="#324157"
-            text-color="#bfcbd9" active-text-color="#20a0ff" unique-opened router>
+        <el-menu
+            class="sidebar-el-menu"
+            :default-active="onRoutes"
+            :collapse="collapse"
+            background-color="#324157"
+            text-color="#bfcbd9"
+            active-text-color="#20a0ff"
+            unique-opened
+            router
+        >
             <template v-for="item in items">
                 <template v-if="item.subs">
                     <el-submenu :index="item.index" :key="item.index">
                         <template slot="title">
-                            <i :class="item.icon"></i><span slot="title">{{ item.title }}</span>
+                            <i :class="item.icon"></i>
+                            <span slot="title">{{ item.title }}</span>
                         </template>
                         <template v-for="subItem in item.subs">
-                            <el-submenu v-if="subItem.subs" :index="subItem.index" :key="subItem.index">
+                            <el-submenu
+                                v-if="subItem.subs"
+                                :index="subItem.index"
+                                :key="subItem.index"
+                            >
                                 <template slot="title">{{ subItem.title }}</template>
-                                <el-menu-item v-for="(threeItem,i) in subItem.subs" :key="i" :index="threeItem.index">
-                                    {{ threeItem.title }}
-                                </el-menu-item>
+                                <el-menu-item
+                                    v-for="(threeItem,i) in subItem.subs"
+                                    :key="i"
+                                    :index="threeItem.index"
+                                >{{ threeItem.title }}</el-menu-item>
                             </el-submenu>
-                            <el-menu-item v-else :index="subItem.index" :key="subItem.index">
-                                {{ subItem.title }}
-                            </el-menu-item>
+                            <el-menu-item
+                                v-else
+                                :index="subItem.index"
+                                :key="subItem.index"
+                            >{{ subItem.title }}</el-menu-item>
                         </template>
                     </el-submenu>
                 </template>
                 <template v-else>
                     <el-menu-item :index="item.index" :key="item.index">
-                        <i :class="item.icon"></i><span slot="title">{{ item.title }}</span>
+                        <i :class="item.icon"></i>
+                        <span slot="title">{{ item.title }}</span>
                     </el-menu-item>
                 </template>
             </template>
@@ -32,140 +50,140 @@
 </template>
 
 <script>
-    import bus from '../common/bus';
-    export default {
-        data() {
-            return {
-                collapse: false,
-                items: [
-                    {
-                        icon: 'el-icon-lx-home',
-                        index: 'dashboard',
-                        title: '系统首页'
-                    },
-                    {
-                        icon: 'el-icon-lx-cascades',
-                        index: 'table',
-                        title: '基础表格'
-                    },
-                    {
-                        icon: 'el-icon-lx-copy',
-                        index: 'tabs',
-                        title: 'tab选项卡'
-                    },
-                    {
-                        icon: 'el-icon-lx-calendar',
-                        index: '3',
-                        title: '表单相关',
-                        subs: [
-                            {
-                                index: 'form',
-                                title: '基本表单'
-                            },
-                            {
-                                index: '3-2',
-                                title: '三级菜单',
-                                subs: [
-                                    {
-                                        index: 'editor',
-                                        title: '富文本编辑器'
-                                    },
-                                    {
-                                        index: 'markdown',
-                                        title: 'markdown编辑器'
-                                    },
-                                ]
-                            },
-                            {
-                                index: 'upload',
-                                title: '文件上传'
-                            }
-                        ]
-                    },
-                    {
-                        icon: 'el-icon-lx-emoji',
-                        index: 'icon',
-                        title: '自定义图标'
-                    },
-                    {
-                        icon: 'el-icon-pie-chart',
-                        index: 'charts',
-                        title: 'schart图表'
-                    },
-                    {
-                        icon: 'el-icon-rank',
-                        index: '6',
-                        title: '拖拽组件',
-                        subs: [
-                            {
-                                index: 'drag',
-                                title: '拖拽列表',
-                            },
-                            {
-                                index: 'dialog',
-                                title: '拖拽弹框',
-                            }
-                        ]
-                    },
-                    {
-                        icon: 'el-icon-lx-global',
-                        index: 'i18n',
-                        title: '国际化功能'
-                    },
-                    {
-                        icon: 'el-icon-lx-warn',
-                        index: '7',
-                        title: '错误处理',
-                        subs: [
-                            {
-                                index: 'permission',
-                                title: '权限测试'
-                            },
-                            {
-                                index: '404',
-                                title: '404页面'
-                            }
-                        ]
-                    }
-                    ,
-                    {
-                        icon: 'el-icon-lx-redpacket_fill',
-                        index: '/donate',
-                        title: '支持作者'
-                    }
-                ]
-            }
-        },
-        computed:{
-            onRoutes(){
-                return this.$route.path.replace('/','');
-            }
-        },
-        created(){
-            // 通过 Event Bus 进行组件间通信，来折叠侧边栏
-            bus.$on('collapse', msg => {
-                this.collapse = msg;
-            })
+import bus from '../common/bus';
+export default {
+    data() {
+        return {
+            collapse: false,
+            items: [
+                {
+                    icon: 'el-icon-lx-home',
+                    index: 'dashboard',
+                    title: '系统首页'
+                },
+                {
+                    icon: 'el-icon-lx-cascades',
+                    index: 'table',
+                    title: '基础表格'
+                },
+                {
+                    icon: 'el-icon-lx-copy',
+                    index: 'tabs',
+                    title: 'tab选项卡'
+                },
+                {
+                    icon: 'el-icon-lx-calendar',
+                    index: '3',
+                    title: '表单相关',
+                    subs: [
+                        {
+                            index: 'form',
+                            title: '基本表单'
+                        },
+                        {
+                            index: '3-2',
+                            title: '三级菜单',
+                            subs: [
+                                {
+                                    index: 'editor',
+                                    title: '富文本编辑器'
+                                },
+                                {
+                                    index: 'markdown',
+                                    title: 'markdown编辑器'
+                                }
+                            ]
+                        },
+                        {
+                            index: 'upload',
+                            title: '文件上传'
+                        }
+                    ]
+                },
+                {
+                    icon: 'el-icon-lx-emoji',
+                    index: 'icon',
+                    title: '自定义图标'
+                },
+                {
+                    icon: 'el-icon-pie-chart',
+                    index: 'charts',
+                    title: 'schart图表'
+                },
+                {
+                    icon: 'el-icon-rank',
+                    index: '6',
+                    title: '拖拽组件',
+                    subs: [
+                        {
+                            index: 'drag',
+                            title: '拖拽列表'
+                        },
+                        {
+                            index: 'dialog',
+                            title: '拖拽弹框'
+                        }
+                    ]
+                },
+                {
+                    icon: 'el-icon-lx-global',
+                    index: 'i18n',
+                    title: '国际化功能'
+                },
+                {
+                    icon: 'el-icon-lx-warn',
+                    index: '7',
+                    title: '错误处理',
+                    subs: [
+                        {
+                            index: 'permission',
+                            title: '权限测试'
+                        },
+                        {
+                            index: '404',
+                            title: '404页面'
+                        }
+                    ]
+                },
+                {
+                    icon: 'el-icon-lx-redpacket_fill',
+                    index: '/donate',
+                    title: '支持作者'
+                }
+            ]
+        };
+    },
+    computed: {
+        onRoutes() {
+            return this.$route.path.replace('/', '');
         }
+    },
+    created() {
+        // 通过 Event Bus 进行组件间通信，来折叠侧边栏
+        bus.$on('collapse', msg => {
+            this.collapse = msg;
+            bus.$emit('collapse-content', msg);
+        });
     }
+};
 </script>
 
 <style scoped>
-    .sidebar{
-        display: block;
-        position: absolute;
-        left: 0;
-        top: 70px;
-        bottom:0;
-        overflow-y: scroll;
-    }
-    .sidebar::-webkit-scrollbar{
-        width: 0;
-    }
-    .sidebar-el-menu:not(.el-menu--collapse){
-        width: 250px;
-    }
-    .sidebar > ul {
-        height:100%;
-    }
+.sidebar {
+    display: block;
+    position: absolute;
+    left: 0;
+    top: 70px;
+    bottom: 0;
+    overflow-y: scroll;
+}
+.sidebar::-webkit-scrollbar {
+    width: 0;
+}
+.sidebar-el-menu:not(.el-menu--collapse) {
+    width: 250px;
+}
+.sidebar > ul {
+    height: 100%;
+}
 </style>