update: 二级导航

Author: geekape

src/pages/Index.vue

@@ -8,22 +8,25 @@
       </div>
       <el-row>
         <el-col :span="24">
-          <el-menu
+           <el-menu
             :default-active="active"
             class="el-menu-vertical-demo"
             background-color="#30333c"
             text-color="#6b7386"
             active-text-color="#fff"
           >
-            <el-menu-item
-              :index="index"
-              v-for="(item,index) in data"
-              :key="item._id"
-              @click="jump(index)"
-            >
-              <i :class="item.icon"></i>
-              <span slot="title">{{item.classify}}</span>
-            </el-menu-item>
+            <el-submenu :index="item.name" v-for="(item,index) in newDataList" :key="item.name">
+              <template slot="title">
+                <i :class="item.icon"></i>
+                <span slot="title">{{item.name}}</span>
+              </template>
+              <el-menu-item :index="nav._id" v-for="(nav,idx) in item.data" :key="nav._id">
+                <a :href="`#${nav.classify}`">
+                  <i :class="nav.icon"></i>
+                  <span slot="title">{{nav.classify}}</span>
+                </a>
+              </el-menu-item>
+            </el-submenu>
           </el-menu>
         </el-col>
       </el-row>
@@ -42,8 +45,8 @@
           </div>
         </div>
         <!-- 开发社区 -->
-        <div class="box" v-for="(item,index) in data" :key="index" :ref="`box-${index}`">
-          <a href="#" :name="item.classify"></a>
+        <div class="box" v-for="(item,index) in data" :key="index">
+          <a :id="`#${item.classify}`" :name="item.classify"></a>
           <div class="sub-category">
             <div>
               <i :class="item.icon" class="icon"></i>
@@ -57,8 +60,8 @@
         <div class="copyright">
           <div>
             Copyright © 2019- 2050
-            <a href="https://github.com/geekape/blog">　钟储兵博客</a>
-            <a href="https://github.com/geekape/geek-navigation">　导航源码下载</a>
+            <a href="https://github.com/geekape/blog">钟储兵博客</a>
+            <a href="https://github.com/geekape/geek-navigation">导航源码下载</a>
           </div>
         </div>
       </footer>
@@ -77,7 +80,6 @@ export default {
     return {
       active: "0",
       data: [],
-      scroll: 0,
       selfIndex: 0,
       isLeftbar: true
     };
@@ -87,39 +89,45 @@ export default {
     AddNavBtn,
     NavItem
   },
-  watch: {
-    active () {
-      const leftBarTop = document.querySelector('.left-bar').scrollTop
-      const num = this.active
-      const length = this.data.length
-      if (num >= 10 && num <= length) {
-        document.querySelector('.left-bar').scrollTop = leftBarTop + 60
-      } 
-      if (num < 10 && num >= 0) {
-        document.querySelector('.left-bar').scrollTop = leftBarTop - 60
-      }
+  computed: {
+    newDataList() {
+      const arr = [];
+      let product = {};
+      let operation = {};
+      let design = {};
+      let web = {};
+      // 产品
+      product.name = "产品";
+      product.icon = "csz czs-circle";
+      product.data = this.data.filter(
+        item => item.classify.indexOf("［产品］") != -1
+      );
+      arr.push(product);
+      // 运营
+      operation.name = "运营";
+      operation.icon = "csz czs-square";
+      operation.data = this.data.filter(
+        item => item.classify.indexOf("［运营］") != -1
+      );
+      arr.push(operation);
+      // 设计
+      design.name = "设计";
+      design.icon = "csz czs-triangle";
+      design.data = this.data.filter(
+        item => item.classify.indexOf("［设计］") != -1
+      );
+      arr.push(design);
+      // 前端
+      web.name = "前端";
+      web.icon = "csz czs-camber";
+      web.data = this.data.filter(
+        item => item.classify.indexOf("［前端］") != -1
+      );
+      arr.push(web);
+      return arr;
     }
   },
   methods: {
-    jump(idx) {
-      this.selfIndex = idx;
-
-      // 跳转
-      let allSite = document.querySelectorAll(".box");
-      let selfOffsetTop = allSite[idx].offsetTop - 10;
-      // 判断是否是在手机上
-      window.screenWidth = document.body.clientWidth;
-      if (window.screenWidth < 481) {
-        selfOffsetTop -= 50;
-      }
-      // Chrome
-      document.body.scrollTop = selfOffsetTop;
-      // Firefox
-      document.documentElement.scrollTop = selfOffsetTop;
-      // Safari
-      window.pageYOffset = selfOffsetTop;
-    },
-
     async getData() {
       const res = await this.$api.getHome();
       this.data = res.data;
@@ -134,23 +142,8 @@ export default {
           that.selfIndex = i;
         }
       }
-    },
-    handleScroll () {
-      const that = this
-      const length = that.data.length
-      const content = document.querySelectorAll('.box')
-      const top = document.body.scrollTop || document.documentElement.scrollTop
-      for (let i=length-1; i>=0; i--) {
-        if (top >= content[i].offsetTop - 20) {
-          that.active = i.toString()
-          break
-        }
-      }
     }
   },
-  mounted (){
-    window.addEventListener('scroll', this.handleScroll);
-  },
   created() {
     const that = this;
     this.getData();
@@ -175,5 +168,19 @@ export default {
 .el-dialog {
   min-width: 320px;
 }
-
+.el-submenu .el-menu-item {
+  padding: 0;
+}
+.el-menu-item > a {
+  color: rgb(107, 115, 134);
+  display: block;
+  width:100%;
+  height: 100%;
+}
+.el-menu-item.is-active > a {
+  color:#fff;
+}
+.csz {
+  margin-right: 5px;
+}
 </style>