feat: 头部导航开发【100%】

src/components/layout/header/HeaderDropdown.vue

-<template>
-  <div class="dropdown-menu w-100 gs-nav-dropdown"
-       :aria-labelledby="`gs-nav-item-${nav.id}`">
-    <div class="row title">
-      {{ nav.name }}
-    </div>
-
-    <div class="row">
-      <div class="col-lg-6">
-        <div class="navbar-dropdown-menu-inner">
-          <div class="row">
-            <div class="col-sm mb-3 mb-sm-0">
-              <span class="dropdown-header">Classic</span>
-              <a class="dropdown-item " href="#">Corporate</a>
-              <a class="dropdown-item " href="#">Analytics <span
-                  class="badge bg-primary rounded-pill ms-1">Hot</span></a>
-              <a class="dropdown-item " href="#">Studio</a>
-              <a class="dropdown-item " href="#">Marketing</a>
-              <a class="dropdown-item " href="#">Advertisement</a>
-              <a class="dropdown-item " href="#">Consulting</a>
-              <a class="dropdown-item " href="#">Portfolio</a>
-              <a class="dropdown-item " href="#">Software</a>
-              <a class="dropdown-item " href="#">Business</a>
-            </div>
-            <!-- End Col -->
-
-            <div class="col-sm">
-              <div class="mb-3">
-                <span class="dropdown-header">App</span>
-                <a class="dropdown-item " href="#">UI Kit</a>
-                <a class="dropdown-item " href="#">SaaS</a>
-                <a class="dropdown-item " href="#">Workflow</a>
-                <a class="dropdown-item " href="#">Payment</a>
-                <a class="dropdown-item " href="#">Tool</a>
-              </div>
-
-              <span class="dropdown-header">Onepage</span>
-              <a class="dropdown-item " href="#">Corporate</a>
-              <a class="dropdown-item " href="#">SaaS <span
-                  class="badge bg-primary rounded-pill ms-1">Hot</span></a>
-            </div>
-            <!-- End Col -->
-          </div>
-          <!-- End Row -->
-        </div>
-      </div>
-      <!-- End Col -->
-    </div>
-  </div>
-</template>
-
 <script>
+const ROW_NUM = 4
 export default {
   name: "HeaderDropdown",
   props: {
     nav: Object
+  },
+  data() {
+    return {}
+  },
+  computed: {
+    rowNum() {
+      return ROW_NUM - 1
+    }
+  },
+  methods: {
+    // 目前只支持两级子代 主要是设计图布局不递归
+    renderDropdown() {
+      const children = []
+      let itemBox = []
+      if (this.nav.children && this.nav.children.length > 0) {
+        this.nav.children.forEach(item => {
+          if (item.children && item.children.length > 0) {
+            if (itemBox.length !== 0) {
+              // 循环到大版块，且之前有遗留非大版块导航选项 需要先处理下非大版块导航选项列
+              children.push(this.renderItemBox([...itemBox]))
+              itemBox = []
+            }
+            children.push(this.renderDropdownRect(item))
+          } else {
+            // 处理非大版块导航选项
+            if (itemBox.length === this.rowNum) {
+              children.push(this.renderItemBox([...itemBox, item]))
+              itemBox = []
+            } else {
+              itemBox.push(item)
+            }
+          }
+        })
+        if (itemBox.length !== 0) {
+          // 循环完之后，有遗留非大版块导航选项 也需要处理
+          children.push(this.renderItemBox([...itemBox]))
+        }
+      }
+      return (<div class="navbar-dropdown-menu-inner">
+        {children}
+      </div>)
+    },
+
+    // 渲染一个下拉导航里的一个大板块(#1) （带children)
+    renderDropdownRect(nav) {
+      const children = []
+      let itemBox = []
+      nav.children.forEach(item => {
+        if (itemBox.length === this.rowNum) {
+          children.push(this.renderItemBox([...itemBox, item], true))
+          itemBox = []
+        } else {
+          itemBox.push(item)
+        }
+      })
+      if (itemBox.length > 0) {
+        children.push(this.renderItemBox([...itemBox], true))
+      }
+      return (<div class="gs-dropdown-rect">
+        <div class="rect-title"
+             vOn:click_stop_prevent={() => {
+               this.$emit('itemClick', {...nav, parent: ['']})
+             }}
+        >
+          <span class="pointer">{nav.nameInHeaderNav ? nav.nameInHeaderNav : nav.name}</span>
+        </div>
+        <div className="rect-body">
+          {children}
+        </div>
+      </div>)
+    },
+
+    // 渲染一个下拉导航里的一列 这个分为在大版块(#1)里的列 和 只是单纯的一列
+    renderItemBox(items, isChild = false) {
+      const classNames = ['gs-dropdown-col', isChild ? 'no-padding-top' : '']
+      return (<div class={classNames.join(' ').trim()}>
+        {items.map(item => {
+          return (<div class="gs-dropdown-item">
+            <span vOn:click_stop_prevent={() => {
+              this.$emit('itemClick', item)
+            }}
+                  class="pointer gs-hover"
+            >{item.name}
+            </span>
+          </div>)
+        })}
+      </div>)
+    },
+  },
+  render() {
+    return (
+        <div class="dropdown-menu w-100 gs-nav-dropdown"
+             aria-labelledby={`gs-nav-item-${this.nav.id}`}>
+          <div class="row title">
+            {this.nav.name}
+          </div>
+
+          <div class="row">
+            {this.renderDropdown()}
+          </div>
+        </div>
+    )
   }
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 // 导航item下拉
 .dropdown-menu.gs-nav-dropdown {
   border: none;
@@ -73,7 +125,51 @@ export default {
     color: #04408D;
     line-height: 25px;
     padding-bottom: 10px;
+    margin-bottom: 29px;
     border-bottom: 1px solid rgba(4, 64, 141, 0.18);
   }
+
+  .navbar-dropdown-menu-inner {
+    display: flex;
+    flex-wrap: wrap;
+    padding-left: 0;
+  }
+}
+
+.gs-dropdown-rect {
+  display: flex;
+  flex-direction: column;
+
+  .rect-title {
+    font-weight: 500;
+    color: #04408D;
+    line-height: 22px;
+    font-size: 16px;
+    padding-bottom: 13px;
+  }
+
+  .rect-body {
+    display: flex;
+    flex-direction: column;
+  }
+}
+
+.gs-dropdown-col {
+  display: flex;
+  flex-direction: column;
+  padding-top: 35px;
+
+  &.no-padding-top {
+    padding-top: 0;
+  }
+
+  .gs-dropdown-item {
+    width: 180px;
+    padding: 7px 0;
+    font-weight: 400;
+    font-size: 14px;
+    color: #414345;
+    line-height: 20px;
+  }
 }
 </style>

src/components/layout/header/index.vue

@@ -28,7 +28,7 @@
                    aria-expanded="false">{{ nav.name }}</a>
 
                 <!-- Dropdown Menu -->
-                <HeaderDropdown v-if="nav.children.length>0" :nav="nav"/>
+                <HeaderDropdown :nav="nav"/>
                 <!-- End Dropdown Menu -->
               </li>
               <!-- Nav items End-->
@@ -101,7 +101,7 @@ export default {
       margin: 0 16px;
     }
   }
-  
+
 
 
   .navbar-toggler {

src/components/layout/header/mock.js

@@ -12,13 +12,13 @@ export const nav = [
         name: '机构概况',
         index: 1,
         link: '/home',
-        children: [{}]
+        children: []
     }, {
         id: '2',
         name: '业务大厅',
         index: 2,
         link: '/home',
-        children: [{}]
+        children: []
     }, {
         id: '3',
         name: '条码查询',
@@ -27,27 +27,28 @@ export const nav = [
         children: [
             {
                 id: uuid('gs_nav'),
-                name: '条件信息查询',
+                name: '条码信息查询',
+                nameInHeaderNav: '条码查询',
                 index: 0,
                 link: '/tool',
                 children: [
                     {
                         id: uuid('gs_nav'),
-                        name: '境内条码信息查询',
+                        name: '国内条码信息查询',
                         index: 0,
-                        link: '/internal',
+                        link: '/tool/internal',
                     },
                     {
                         id: uuid('gs_nav'),
-                        name: '境外条码信息查询',
+                        name: '国外条码信息查询',
                         index: 1,
-                        link: '/external',
+                        link: '/tool/external',
                     },
                     {
                         id: uuid('gs_nav'),
                         name: '缩短码查询',
                         index: 2,
-                        link: '/shortcode',
+                        link: '/tool/shortcode',
                     },
                     {
                         id: uuid('gs_nav'),
@@ -61,30 +62,31 @@ export const nav = [
                 id: uuid('gs_nav'),
                 name: 'GLN查询',
                 index: 1,
-                link: '/gln',
+                link: '/tool/gln',
             },
             {
                 id: uuid('gs_nav'),
                 name: '自行车企业代码公告查询',
                 index: 2,
-                link: '/bike',
+                link: '/tool/bike',
             },
             {
                 id: uuid('gs_nav'),
                 name: '条码术语查询',
                 index: 3,
-                link: '/glossary',
-            },{
+                link: '/tool/glossary',
+            },
+            {
                 id: uuid('gs_nav'),
                 name: '校验码计算工具',
                 index: 4,
-                link: '/check',
+                link: '/tool/check',
             },
             {
                 id: uuid('gs_nav'),
                 name: '国家及地区前缀码查询',
                 index: 5,
-                link: '/country',
+                link: '/tool/country',
             },
 
         ]
@@ -93,31 +95,31 @@ export const nav = [
         name: '服务中心',
         index: 4,
         link: '/home',
-        children: [{}]
+        children: []
     }, {
         id: '5',
         name: '资讯中心',
         index: 5,
         link: '/home',
-        children: [{}]
+        children: []
     }, {
         id: '6',
         name: '知识中心',
         index: 6,
         link: '/home',
-        children: [{}]
+        children: []
     },
     {
         id: '7',
         name: '党建文化',
         index: 7,
         link: '/home',
-        children: [{}]
+        children: []
     }, {
         id: '8',
         name: '成员专区',
         index: 8,
         link: '/home',
-        children: [{}]
+        children: []
     },
 ]