VUE3后台管理系统第三章头部导航栏开发

功能描述头部内容添加导航栏，很常用的功能


功能逻辑实现，设置父元素超出自动换行。获取所有菜单项。获取第一个菜单项相对于其父元素的垂直偏移量offsetTop。循环菜单项和第一个菜单项offsetTop不同的菜单均为超出父级的宽度的菜单。截取这部分菜单放到展开项里。
js代码

import { defineComponent,computed,ref,onMounted,nextTick} from "vue"
import styles from  './index.module.scss';
export default defineComponent({
    setup(props:any) {
        const tabList = ref([{
            name: "首页",
            path: "/",
        },{
            name: "菜单一",
            path: "/",
        },{
            name: "菜单二",
            path: "/",
        },{
            name: "菜单三",
            path: "/",
        },{
            name: "菜单四",
            path: "/",
        },{
            name: "菜单五",
            path: "/",
        },{
            name: "菜单六",
            path: "/",
        },{
            name: "菜单七",
            path: "/",
        },{
            name: "菜单八",
            path: "/",
        },{
            name: "菜单九",
            path: "/",
        },{
            name: "菜单十",
            path: "/",
        }]);
        const expandMenu=ref<any>([])
        const activeMenu = ref<number>(0);
        const getTabIndex=function(children:any,len_:number,firstChildTop:number){
            for (let i = 1; i < len_; i++) {
                if (children[i].offsetTop>firstChildTop) {
                    return i
                }
            };
        };
        onMounted(() => {
            nextTick(() => {
                try{
                    let parent:any = document.getElementById('layout3-head-menu');
                    let children = parent.children;
                    let firstChildTop = children[0].offsetTop;
                    let len_=children.length;
                    let index_:any=getTabIndex(children,len_,firstChildTop);
                    if(index_>0){
                        expandMenu.value=tabList.value.slice(index_);
                    }else{
                        expandMenu.value=[];
                    };
                    if(len_>2&&firstChildTop){
                        window.onresize = () => {
                            let index_:any=getTabIndex(children,len_,firstChildTop);
                            if(index_>0){
                                expandMenu.value=tabList.value.slice(index_);
                            }else{
                                expandMenu.value=[];
                            };
                        };
                    };
                }catch (e) {}
            });
        });
        return () => (<>
            <div class={styles.layout3Head}>
                <div class={styles.layout3Menu}>
                    <div class={styles.layout3MenuCon}>
                        <div class={styles.layout3HeadMenu} id="layout3-head-menu">
                            {
                                tabList.value.map((item:any,index:number) => {
                                    return (<>
                                        <div class={[styles.layout3HeadMenuItem,activeMenu.value==index?styles.layout3HeadMenuItemActive:'']} 
                                            onClick={() => {
                                                activeMenu.value = index;
                                            }}
                                        >
                                            {item.name}
                                        </div>
                                    </>)
                                })
                            }
                        </div>
                        <div class={styles.layout3HeadFun}>
                            {
                                expandMenu.value.length>0?<div class={styles.layout3MenuExpand}>
                                    <el-dropdown v-slots={{
                                        default: () => <>
                                            <el-button link>展开{}</el-button>
                                        </>,
                                        dropdown: () => <el-dropdown-menu>
                                            {
                                                expandMenu.value.map((item:any,index:number) => {
                                                    return (<>
                                                        <el-dropdown-item>{item.name}</el-dropdown-item>
                                                    </>)
                                                })
                                            }
                                        </el-dropdown-menu>
                                    }}>
                                    </el-dropdown>
                                </div>:<></>
                            }
                        </div>
                    </div>
                </div>
            </div>
        </>)
    }
})

css

.layout3-menu{
    width:100%;
    height: 60px;
    display: flex;
    align-items: center;
    .layout3-menu-con{
        flex-grow: 1;
        background: #fff;
        display: flex;
        height: 100%;
        padding: 0 20px;
        box-sizing: border-box;
        align-items: center;
        .layout3-head-menu{
            color: #333333;
            font-size: 14px;
            height: 32px;
            overflow: hidden;
            .layout3-head-menu-item{
                padding: 4px 18px;
                cursor: pointer;
                margin-right: 12px;
                float: left;
            }
            .layout3-head-menu-item-active{
                background: #EFF4FF;
                border-radius: 16px;
                color: #3D7AFA;
            }
        }
        .layout3-head-fun{
            margin-left: auto;
            display: flex;
            align-items: center;
        }
        .layout3-menu-expand{
            margin-right: 12px;
            cursor: pointer;
        }
    }
}