添加文章功能的入口(还未开发),菜单弹出栏点击某个菜单后自动关闭,修复返回顶部无效的问题

admin/src/App.vue

@@ -79,12 +79,12 @@
       <el-container :style="mainChildElContainerStyle">
         <el-aside v-show="elAsideShow" width="240px">
           <el-scrollbar style="height:100%;">
-            <left-menu :data="menu"></left-menu>
+            <left-menu :data="menu" @leftMenuSelect="leftMenuSelectHandle"></left-menu>
           </el-scrollbar>
         </el-aside>
         <el-container :style="mainChildElContainerStyle">
-          <el-scrollbar style="height:100%;width: 100%;">
-            <el-backtop :style="backtopStyle" target=".el-scrollbar__wrap">
+          <el-scrollbar class="main-el-scrollbar" style="height:100%;width: 100%;">
+            <el-backtop :style="backtopStyle" target=".main-el-scrollbar .el-scrollbar__wrap">
               <i class="el-icon-caret-top"></i>
             </el-backtop>
             <el-main>
@@ -119,7 +119,7 @@
             <span slot="title">功能菜单</span>
             <el-divider></el-divider>
           </div>
-          <left-menu :data="menu"></left-menu>
+          <left-menu :data="menu" @leftMenuSelect="leftMenuSelectHandle"></left-menu>
         </el-scrollbar>
       </div>
     </el-drawer>
@@ -292,6 +292,12 @@
       //菜单按钮点击
       mainMenuBtnClick() {
         this.leftMenuDrawerShow = true;
+      },
+      //左边的菜单选择
+      leftMenuSelectHandle() {
+        if (this.leftMenuDrawerShow) {
+          this.leftMenuDrawerShow = false;
+        }
       }
     }
   }

admin/src/components/article.vue

@@ -0,0 +1,49 @@
+<template>
+  <div class="article">
+    <el-card class="searcBar">
+      searchBar
+    </el-card>
+    <el-card class="listBar">
+      <ul v-infinite-scroll="load">
+        <li v-for="i in count" :key="i">{{ i }}</li>
+      </ul>
+    </el-card>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: "article",
+    data() {
+      return {
+        count: 0
+      }
+    },
+    methods: {
+      load() {
+        if (this.count < 500) {
+          console.log('load');
+          this.count += 10;
+        }
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .article {
+    padding: 10px 10px 10px 10px;
+
+    .el-card {
+      border-radius: 0px;
+    }
+
+    .searcBar {
+
+    }
+
+    .listBar {
+      margin-top: 10px;
+    }
+  }
+</style>

admin/src/components/leftMenu.vue

@@ -5,6 +5,10 @@
         <i class="el-icon-menu"></i>
         <span slot="title">首页</span>
       </el-menu-item>
+      <el-menu-item index="article">
+        <i class="el-icon-edit-outline"></i>
+        <span slot="title">文章</span>
+      </el-menu-item>
       <div v-if="data">
         <left-menu-item :data="data"></left-menu-item>
       </div>
@@ -33,6 +37,7 @@
         if (this.$route.name !== index) {
           this.$router.push({name: index});
         }
+        this.$emit('leftMenuSelect', index);
       }
     }
   }

admin/src/router/index.js

@@ -6,6 +6,11 @@ export default new VueRouter({
       path: '/',
       name: 'home',
       component: () => import('../components/home'),
+    },
+    {
+      path: '/article',
+      name: 'article',
+      component: () => import('../components/article'),
     }
   ]
 });