Skip to content

G
gs1
Commit 450edfe0 by Tang
Options

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

parent 5ba78711
Showing with 171 additions and 73 deletions
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: []
},
]
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment