vue + view-design 菜单高亮及展开情况_vue +view 实现菜单页面-优快云博客

本文链接：https://blog.youkuaiyun.com/Miss_Liang/article/details/111032578

vue + view-design 菜单高亮及展开情况

页面刷新菜单高亮及默认打开

跳转子页面，父菜单高亮，离开二次确认，取消时，菜单正确高亮

跳转子页面，父菜单高亮

离开二次确认，取消时，菜单正确高亮

vue + view-design 菜单高亮及展开情况

页面刷新菜单高亮及默认打开

需求背景：页面菜单分为多层折叠菜单和单层菜单，当页面浏览器刷新时，仍然能正确保留当前菜单高亮以及打开的层叠菜单项

实现思路：Menu 组件绑定 active-name 属性和 open-names 属性

1. 定义菜单数据

const operatorMenuList = [
    {
        isShow: true,
        name: 'firstMenu',
        text: '菜单一',
        className: 'class-name-1',
        link: '/routerLink1',
    },
    {
        isShow: true,
        name: '2',
        text: '菜单二',
        className: 'class-name-2',
        children: [
            {
                isShow: true,
                name: '2-1',
                link: '/childLink1',
                text: '子菜单一',
            },
            {
                isShow: true,
                name: '2-2',
                link: '/childLink2',
                text: '子菜单二',
            },
            {
                isShow: true,
                name: '2-3',
                link: '/childLink3',
                text: '子菜单三',
            },
            {
                isShow: true,
                name: '2-4',
                link: '/childLink4',
                text: '子菜单四',
            },
            {
                isShow: true,
                name: '2-5',
                link: '/childLink5',
                text: '子菜单五',
            },
            {
                isShow: true,
                name: '2-6',
                link: '/childLink6',
                text: '子菜单六',
            },
        ],
    },
    {
        isShow: true,
        name: '3',
        text: '菜单三',
        className: 'class-name-3',
        link: '/routerLink3',
    },
    {
        isShow: true,
        name: '4',
        text: '菜单四',
        className: 'class-name-4',
        children: [
            {
                isShow: true,
                name: '4-1',
                link: '/childLink7',
                text: '子菜单七',
            },
            {
                isShow: true,
                name: '4-2',
                link: '/childLink8',
                text: '子菜单八',
            },
            {
                isShow: true,
                name: '4-3',
                link: '/childLink9',
                text: '子菜单九',
            },
            {
                isShow: true,
                name: '4-4',
                link: '/childLink10',
                text: '子菜单十',
            },
            {
                isShow: true,
                name: '4-5',
                link: '/childLink11',
                text: '子菜单十一',
            },
        ],
    },
    {
        isShow: true,
        name: '5',
        text: '菜单五',
        className: 'class-name-5',
        children: [
            {
                isShow: true,
                name: '5-1',
                link: '/childLink12',
                text: '子菜单十二',
            },
            {
                isShow: true,
                name: '5-2',
                link: '/childLink13',
                text: '子菜单十三',
            },
            {
                isShow: true,
                name: '5-3',
                link: '/childLink14',
                text: '子菜单十四',
            },
        ],
    },
]

export default {
    data(){
        return {
            operatorMenuList,
        }
    }
}

2. v-for 渲染出所有菜单

<Menu
    width='auto'
    :accordion='true'
    ref='menuRef'
>
    <div
        v-for='menu in menuList'
        :key='menu.name'
    >
        <Submenu
            :name='menu.name'
            v-if='menu.isShow && !menu.link'
        >
            <template
                slot='title'
            >
                <i :class='menu.className' ></i>
                <span v-show='isMenuOpen'>{{ menu.text }}</span>
            </template>
            <MenuItem
                v-for='submenu in menu.children'
                :name='submenu.name'
                :key='submenu.name'
                v-show='submenu.isShow'
            >
                <router-link :to='submenu.link'>{{ submenu.text }}</router-link>
            </MenuItem>
        </Submenu>
        <MenuItem
            :name='menu.name'
            v-if='menu.isShow && menu.link'
        >
            <router-link
                :to='menu.link'
            >
                <i :class='menu.className' ></i>
                {{ menu.text }}
            </router-link>
        </MenuItem>
    </div>
</Menu>

3. 定义 router 路由文件，保证 $route.name 的值与菜单中的 name 值一致

export default [
    {
        name: 'firstMenu',
        path: '/routerLink1',
        component: () => import('path'),
    },
    {
        name: '2-1',
        path: '/childLink1',
        component: () => import('path'),
    },
    {
        name: '2-2',
        path: '/childLink2',
        component: () => import('path'),
    },
    {
        name: '2-3',
        path: '/childLink3',
        component: () => import('path'),
    },
    {
        name: '2-4',
        path: '/childLink4',
        component: () => import('path'),
    },
    {
        name: '2-5',
        path: '/childLink5',
        component: () => import('path'),
    },
    {
        name: '2-6',
        path: '/childLink6',
        component: () => import('path'),
    },
    {
        name: '3',
        path: '/routerLink3',
        component: () => import('path'),
    },
    {
        name: '4-1',
        path: '/childLink7',
        component: () => import('path'),
    },
    {
        name: '4-2',
        path: '/childLink8',
        component: () => import('path'),
    },
    {
        name: '4-3',
        path: '/childLink9',
        component: () => import('path'),
    },
    {
        name: '4-4',
        path: '/childLink10',
        component: () => import('path'),
    },
    {
        name: '4-5',
        path: '/childLink11',
        component: () => import('path'),
    },
    {
        name: '5-1',
        path: '/childLink12',
        component: () => import('path'),
    },
    {
        name: '5-2',
        path: '/childLink13',
        component: () => import('path'),
    },
    {
        name: '5-3',
        path: '/childLink14',
        component: () => import('path'),
    },
]

4. 绑定 active-name属性

<Menu
    width='auto'
    :accordion='true'
    ref='menuRef'
    :active-name='$route.name'
>
    ...
</Menu>

5. 计算 open-names 属性

export default {
    computed: {
        // 当前打开菜单
        openNames () {
            const openNames = {
                // 菜单二，2-1-1 是 2-1 菜单下的子页面，以此类推
                2: ['2-1', '2-1-1', '2-1-2', '2-1-3', '2-1-4', '2-2', '2-2-1', '2-2-2', '2-3', '2-3-1', '2-3-2', '2-3-3', '2-4', '2-4-1', '2-4-2', '2-5', '2-5-1', '2-5-2', '2-6', '2-6-1', '2-6-2'],
                // 菜单四，4-1-1 是 4-1 菜单下的子页面，以此类推
                4: ['4-1', '4-1-1', '4-2', '4-3', '4-3-1', '4-4', '4-4-1', '4-5', '4-5-1', '4-5-2', '4-5-3', '4-5-4'],
                // 菜单五
                5: ['5-1', '5-2', '5-3'],
            }

            const routeName = this.$route.name
            let openName = []
            Object.keys(openNames).map(key => {
                const isCurrentKey = openNames[key].some(name => name === routeName)
                if (isCurrentKey) openName = [key] // 找到当前打开的父菜单的 name 值
            })
            
            // 手动更新展开的子目录，防止通过 this.$router.push 方式动态添加未触发子目录展开 
            if (openName) {
                this.$nextTick(() => {
                    this.$refs.menuRef.updateOpened()
                })
            }
            return openName || []
        },
    },
}

6. 绑定 open-names 属性

<Menu
    width='auto'
    :accordion='true'
    ref='menuRef'
    :open-names='openNames'
    :active-name='$route.name'
>
    ...
</Menu>

7. 定义高亮样式

// 在选中 a 链接上定义高亮样式
.router-link-exact-active.router-link-active{
    color: $menu-active-color;
    background-color: $menu-active-bg;
}

跳转子页面，父菜单高亮，离开二次确认，取消时，菜单正确高亮

跳转子页面，父菜单高亮

需求背景：比如从子菜单一列表页跳转到子菜单一新建页，或者从子菜单一列表页跳转到子菜单一详情页，此时要求子菜单一高亮；或者从菜单一列表页跳转到菜单一新建页，或者从菜单一列表页跳转到菜单一详情页，此时要求菜单一高亮；

离开二次确认，取消时，菜单正确高亮

需求背景：有些新建编辑页面在用户离开时会有二次确认，若离开则放弃编辑内容，否则停留在当前页面；比如用户在子菜单一编辑页，编辑了一些新数据，点击菜单二进行跳转，此时会弹出二次确认是否要跳转，若点击了是，则正常进行调整到菜单二，此时菜单二高亮；若点击了否，则放弃跳转，此时只能继续高亮子菜单一！！！菜单二不能高亮！！！

实现思路：根据前面所述需求，不能通过 ivu-menu-item-active ivu-menu-item-selected 来为菜单定义高亮样式，相反需要把ivu-menu-item-active ivu-menu-item-selected类名控制的菜单高亮样式清除，开发人员需要自己定义菜单选中类名menu-active，然后根据选中类名menu-active来定义高亮样式

实现步骤：1. 计算并定义 menu-active 类名 2. 清除ivu-menu-item-active ivu-menu-item-selected 控制的高亮样式 3. 根据 menu-active 定义高亮样式

1. 计算并定义 menu-active 类名

<Menu
    width='auto'
    :accordion='true'
    ref='menuRef'
    :open-names='openNames'
    :active-name='$route.name'
>
    ...
    <!-- 二级子菜单 -->
    <MenuItem
        v-for='submenu in menu.children'
        :name='submenu.name'
        :key='submenu.name'
        v-show='submenu.isShow'
        :class='{"menu-active": $route.name.slice(0,3).indexOf(submenu.name) !== -1}'
    >
        <router-link :to='submenu.link'>{{ submenu.text }}</router-link>
    </MenuItem>
    ...
    <!-- 一级菜单 -->
    <MenuItem
        :name='menu.name'
        v-if='menu.isShow && menu.link'
        :class='{"menu-active": $route.name.slice(0,1).indexOf(menu.name) !== -1}'
    >
        <router-link
            :to='menu.link'
        >
            <i
                :class='menu.className'
            ></i>
            {{ menu.text }}
        </router-link>
    </MenuItem>
</Menu>

2. 清除ivu-menu-item-active ivu-menu-item-selected 控制的高亮样式

.ivu-menu-light.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu) {
    color: $menu-default-color;
    background-color: $menu-default-bg;
}

3. 根据 menu-active 定义高亮样式

.menu-active a {
    color: $menu-active-color;
    background-color: $menu-active-bg;
}