点击一级导航显示二级导航
<template>
<ul class="nav">
<!-- 一级导航 -->
<li class="nav-item" v-for="(item, index) in navItems" :class="{ active: index === selected }" :key="item" @click="toggleSubNav(index)">
{
{ item.label }}
<ul v-if="item.showSubNav" class="sub-nav">
<!-- 二级导航 -->
<li class="sub-nav-item" v-for="(child, index) in item.children" :class="{ check: index === checked }" :key="child" @click="handleClick(child, index)">
{
{ child.label }}
</li>
</ul>
</li>
</ul>
</template>
<script>
export default {
//接收父组件传递的导航数据
props: {
navArray: {
type: Array,
required: true,
},
},
data() {
return {
// 导航数据数组
navItems: [],
// 当前选中的一级导航的索引
selected: 0,
// 当前选中的二级导航的索引
checked: 0,
};
},
created() {
// 复制 navArray 数组中的每个元素,并添加一个 showSubNav 属性
this.navItems = this.navArray.map(item => {
return {
...item,
showSubNav: false,
};
});
// 默认显示第一个一级导航的二级导航
this.navItems[0].showSubNav = true;
},
methods: {
toggleSubNav(index) {
// 更换被选中的一级导航索引
this.selected = index;
// 排他
this.navItems.map(item => (item.showSubNav = false));
this.navItems[index].showSubNav = !this.navItems[index].showSubNav;
},
handleClick(item, index) {
// 更换被选中的二级导航索引
this.checked = index;
this.$emit('click', item);
},
},
};
</script>
<style scoped lang="scss">
.nav {
list-style: none;
display: flex;
.nav-item {
height: 0.44rem;
width: 1.71rem;
text-align: center;
font-family: YSBiaoTiHei-regular;
font-size: 0.24rem;
color: rgba(255, 255, 255, 1);
margin-right: 0.09rem;
position: relative;
line-height: 0.44rem;
cursor: pointer;
background-image: url('@/assets/img/header/header-list-item.png');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
.sub-nav {
display: flex;
position: absolute;
top: 0.6rem;
text-align: center;
.sub-nav-item {
height: 0.26rem;
width: 0.8rem;
line-height: 0.26rem;
margin-left: 0.38rem;
cursor: pointer;
color: #bfc1ce;
font-size: 0.2rem;
text-align: left;
font-family: YSBiaoTiHei-regular;
}
.check {
color: #ffffff;
}
}
}
.active {
background-image: url('@/assets/img/header/header-list-item-active.png');
}
}
</style>
父组件引用该组件
<template>
<HeaderCenter :navArray="navArray" @click="handleNavClick" />
</template>
<script>
import HeaderCenter from './HeaderCenter.vue';
data(){
// 导航数据
navArray: [
{
label: '聚合决策',
children: [{ label: '连续生产' }, { label: '连续掘进' }, { label: '煤流运输' }, { label: '物资库存' }, { label: '煤质检测' }, { label: '外运销售' }, { label: '产销全链' }],
},
{ label: '精益成效' },
{
label: '专项研判',
children: [{ label: '组织人员' }, { label: '机电设备' }, { label: '客户厂商' }],
},
{ label: '指标触达' },
{ label: '创标驱动' },
],
},
methods:{
// 点击导航栏,可以对该导航进行一些操作
handleNavClick(item) {
console.log(item);
},
}
</script>