vue ---- 动态菜单

效果图 菜单

功能:

· 点击当前项高亮
· 有子元素的父项可以展开及收回
· 刷新页面检索当前项
· 当然还有点击单项跳转对应页面啦

问题:

样式问题..菜单的展开和收回设置动画来着, 原本想的是height, 不道为啥子项外好像还有个容器😂

思路:

· 首先一个组件, 是最外层的菜单list
· 判断每项有无子元素, 如果有, 组件自己用自己(我不道我表达清楚了没😂但它就是自己用自己)
· 在接收到权限后, 过滤原本完整的路由数组, 重新设置路由
· 以meta.title为展示, name为唯一值

组件代码:

<template>
    <div class="layout-menu">
        <!-- 循环传入的list: 无子项直接跳转页面, 有子项就展开 -->
        <div
            v-for="(menu, index) in menuList"
            :key="index"
            @click.stop="menu.children ? openSubMenu(menu) : jumpToPage(menu)"
        >
            <!-- paddingLeft: 该组件是循环嵌套, 每套一次该值增加一点. 具体计算放在computed中 -->
            <div
                :class="[
                    'menu-item',
                    $Store.activeMenu === menu.name ? 'active' : '',
                ]"
                :style="{ paddingLeft: paddingLeft(menu.layer) + 'px' }"
            >
                <div class="l f_r">
                    <i
                        :class="['fa icon', menu.meta.icon]"
                        :style="{ marginRight: isCollapse ? '0' : '12px' }"
                    ></i>
                    <p
                        v-show="barsTextShow && !isCollapse"
                        class="njx_transition"
                    >
                        {{ menu.meta.title }}
                    </p>
                </div>
                <i
                    :style="{
                        transform: menu.subShow
                            ? 'rotate(140deg)'
                            : 'rotate(0deg)',
                    }"
                    class="fa icon_arrow fa-level-down"
                    v-show="menu.children && !isCollapse"
                ></i>
            </div>
            <transition name="fade">
                <div
                    class="submenu-item"
                    v-show="menu.children && menu.subShow && !isCollapse"
                >
                    <!-- 有子项, 自己用自己 💃 -->
                    <njx-menu :list="menu.children" />
                </div>
            </transition>
        </div>
    </div>
</template>

<script>
export default {
    name: "njx-menu",
    props: {
        list: Array,
    },
    computed: {
        isCollapse() {
            return this.$Store.isCollapse;
        },
        paddingLeft() {
            // 一层比一层值大, 但是不超过60(不然该挤出去了😂)
            return (layer) => {
                let padding;
                switch (true) {
                    case layer <= 4:
                        padding = layer * 20;
                        break;
                    default:
                        padding = 60;
                        break;
                }
                return padding;
            };
        },
    },
    data() {
        return {
            menuList: this.list,
            barsTextShow: true,
            logoTextShow: true,
        };
    },
    methods: {
        jumpToPage(menu) {
            this.$Store.activeMenu = menu.name;

            this.$router.push({
                path: menu.fullPath,
            });
        },
        openSubMenu(menu) {
            const currentIndex = this.menuList.findIndex(
                (item) => item.name === menu.name
            );
            this.menuList = this.menuList.map((item, index) => {
                if (index === currentIndex) {
                    item.subShow = !item.subShow;
                }
                return item;
            });
        },
    },
    watch: {
        list(list) {
            this.menuList = list;
        },
    },
};
</script>

<style scoped lang="scss">
@import "@/assets/css/theme.scss";
.layout-menu {
    .menu-item {
        display: flex;
        align-items: center;
        justify-content: space-between;

        padding: 20px;

        color: $primary-text;
        font-size: 14px;

        cursor: pointer;
    }
    .menu-item:hover {
        background: rgba(128, 118, 163, 0.9);
        transition: background 0.1s ease-in;
    }
    .menu-item.active {
        background: rgba(128, 118, 163, 0.9);
    }
    .submenu-item {
        font-size: 12px;
        color: $primary-text;
        background: #8c86aa;

        cursor: pointer;

        transition: all 0.2s ease-in-out;
    }
}
.icon_arrow {
    font-size: 12px;
    float: right;

    transition: all ease-in-out 0.2s;
}
.icon {
    color: $primary-text;
}
// 子菜单展开收回的动画, 暂时采用缩放😅
.fade-enter-active,
.fade-leave-active {
    transition: all 0.4s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
    transform: scaleY(0);
}
</style>

使用页面代码 ⬇️

<div style="height: calc(100% - 70px);" class="menu">
    <njx-menu :list="menuList" />
</div>

tada~~~_{一个动态菜单就完成啦}💃

(好像动态的主要内容并没有放在这里哈哈哈哈哈哈哈哈只是一个和el-menu类似但远没有那么强大的menu组件)