一二级导航联动

点击一级导航显示二级导航

<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>