VueJS 中的下拉菜单(切换活动菜单)

1 回答

• 0

  切换类应作为data的一部分进行管理。试试这个，看看它是否适合你：

  HTML

  <div id="app">
     <nav class="idb-sidebar-nav">
        <ul class="idb-nav list-unstyled m-15 p-0">
           <template v-for="(menu, index) in sideBarLinks.routes" :key="index">
              <li class="nav-item"
                    v-if="menu.child_routes && menu.child_routes.length">
  
                 <a :class="[ 'nav-link', { 'active': menu.active } ]"
                    href="javascript:void(0);"
                    @click="toggleMenu(index)">
  
                    <i :class="menu.menu_icon" class="menu-icon"></i>
                    <span class="menu-title">{{menu.menu_title}}</span>
                 </a>
  
                 <ul class="list-unstyled sub-menu">
                    <router-link tag="li"
                                 v-for="(subMenu, key) in menu.child_routes"
                                 :key="key"
                                 :to="subMenu.path">
                       <a href="javascript:void(0);" class="sub-menu-nav-link">
                          <span>{{subMenu.menu_title}}</span>
                       </a>
                    </router-link>
                 </ul>
              </li>
  
              <router-link v-else
                           :key="index"
                           :to="menu.path"
                           tag="li"
                           class="nav-item">
  
                 <a :class="[ 'nav-link', { 'active': menu.active } ]"
                    href="javascript:void(0);"
                    @click="toggleMenu(index)">
  
                    <i :class="menu.menu_icon" class="mr-15"></i>
                    <span class="menu-title">{{menu.menu_title }}</span>
                 </a>
  
              </router-link>
           </template>
        </ul>
     </nav>
  </div>
  

  routes.json

  为了提高可读性和可维护性，您最好将列表移动到单独的文件中。

  [
     {
        "menu_title": "a",
        "child_routes": [
           {
              "path": "/a1",
              "menu_title": "a1"
           },
           {
              "path": "/a2",
              "menu_title": "a2"
           }
        ],
        active: true // First item opened by default (if you like)
     },
     {
        "menu_title": "b",
        "child_routes": [
           {
              "path": "/b1",
              "menu_title": "b1"
           },
           {
              "path": "/b2",
              "menu_title": "b2"
           },
           {
              "path": "/b1",
              "menu_title": "b3"
           }
        ],
        active: false
     },
     {
        // ...
     }
  ]
  

  app.js

  import * as routes from './routes.json';
  
  const vm = new Vue({
     el: '#app',
  
     data() {
        return {
           sideBarLinks: {
              routes
           }
        }
     },
  
     methods: {
        toggleSidebar(index) {
           this.sideBarLinks
              .routes
              .forEach((menu, i) => menu.active = (i === index));
        }
     }
  });
  

  回复于 2024-04-26T06:41:23+08:00