menuList[{text:,route:,activeSign:**}]用法

原创于 2024-07-29 21:00:00 发布 · 485 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue.js

menuList是一个包含菜单项的数组，每一个菜单项都是一个对象，具有以下属性：

（1）text：菜单的文本内容、

（2）route:点击菜单项时，导航到的路径

（3）activeSign:用于表示当前活动状态的标志

示例代码说明：

const menuList = [ { text: '新建实验',
 route: '/main/testSetting',
 activeSign: 'testSetting'},
 ];

这个 menuList 数组可以用来生成一个菜单，用户点击菜单项时会导航到相应的路径，并且可以通过 activeSign 属性来判断哪个菜单项是当前活动状态。

举栗说明

HTML 和 JavaScript 代码示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>菜单示例</title>
    <style>
        .menu-item {
            padding: 10px;
            cursor: pointer;
        }
        .active {
            font-weight: bold;
            color: red;
        }
    </style>
</head>
<body>

<div id="menu"></div>

<script>
    const menuList = [
        { text: '新建测试', route: '/main/testSetting', activeSign: 'testSetting' },
    ];

    const activeRoute = '/main/testSetting'; // 假设当前活动路径为 '/main/testSetting'

    function renderMenu(menuList) {
        const menuDiv = document.getElementById('menu');
        menuList.forEach(menuItem => {
            const itemDiv = document.createElement('div');
            itemDiv.textContent = menuItem.text;
            itemDiv.className = 'menu-item';
            if (menuItem.route === activeRoute) {
                itemDiv.classList.add('active');
            }
            itemDiv.addEventListener('click', () => {
                // 在这里处理导航逻辑，比如：
                console.log(`导航到: ${menuItem.route}`);
                window.location.href = menuItem.route;
            });
            menuDiv.appendChild(itemDiv);
        });
    }

    renderMenu(menuList);
</script>

</body>
</html>

代码解释

HTML 部分:
- 创建一个 <div> 元素，用于容纳菜单项。
CSS 部分:
- .menu-item 类为每个菜单项提供基本样式。
- .active 类用于高亮显示当前活动的菜单项。
JavaScript 部分:
- 定义 menuList 数组，其中包含一个菜单项对象。
- 假设当前活动路径为 /main/testSetting。
- renderMenu 函数用来生成菜单，并根据当前活动路径高亮显示对应的菜单项。
- 为每个菜单项添加点击事件监听器，当用户点击菜单项时，会打印导航路径并导航到相应路径。