vue侧边栏导航展开和折叠源码

以下是一个简单的 Vue 侧边栏导航展开和折叠的源码示例：

<template>
  <div class="sidebar-container">
    <div class="sidebar">
      <ul>
        <li v-for="(item, index) in menuList" :key="index">
          <a href="#" @click="toggleSubmenu(index)">
            <i :class="item.icon"></i>
            <span>{{ item.title }}</span>
            <span v-if="item.submenu" class="submenu-toggle">
              <i class="fa fa-chevron-down" v-show="!item.open"></i>
              <i class="fa fa-chevron-up" v-show="item.open"></i>
            </span>
          </a>
          <ul v-if="item.submenu" :class="{ 'submenu-open': item.open }">
            <li v-for="(subitem, subindex) in item.submenu" :key="subindex">
              <a :href="subitem.link">{{ subitem.title }}</a>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menuList: [
        {
          title: "Dashboard",
          icon: "fa fa-tachometer",
          submenu: [
            {
              title: "Analytics",
              link: "/dashboard/analytics"
            },
            {
              title: "Sales",
              link: "/dashboard/sales"
            }
          ]
        },
        {
          title: "Products",
          icon: "fa fa-cubes",
          submenu: [
            {
              title: "All Products",
              link: "/products/all"
            },
            {
              title: "Add New",
              link: "/products/add-new"
            }
          ]
        }
      ]
    };
  },
  methods: {
    toggleSubmenu(index) {
      this.menuList[index].open = !this.menuList[index].open;
    }
  }
};
</script>

<style>
.sidebar-container {
  display: flex;
  flex-direction: row;
  height: 100vh;
}

.sidebar {
  background-color: #333;
  color: #fff;
  width: 200px;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  border-bottom: 1px solid #555;
}

a {
  color: #fff;
  display: flex;
  align-items: center;
  padding: 10px;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

a:hover {
  background-color: #444;
}

i {
  margin-right: 10px;
}

.submenu-toggle {
  margin-left: auto;
}

.submenu-open {
  display: block;
}
</style>

在这个示例中，我们的侧边栏被包含在一个 `.sidebar-container` 容器中，并采用了 Flexbox 布局。我们定义了一个简单的样式来呈现侧边栏的外观。

在 `data` 中，我们定义了一个 `menuList` 数组，其中包含每个菜单项的标题、图标和子菜单（如果有的话）。我们还添加了一个 `open` 属性来追踪每个菜单项的展开状态。

在模板中，我们使用 `v-for` 指令来循环遍历 `menuList`，并使用 `v-if` 指令来检查菜单项是否有子菜单。我们还添加了一个 `@click` 事件监听器，以便在用户单击菜单项时切换子菜单的展开状态。

在样式中，我们定义了一些基本的样式来呈现菜单项和子菜单的外观。我们使用 `.submenu-open` 类来控制子菜单的可见性。

请注意，这只是一个简单的示例，您可能需要根据自己的需求进行修改和调整。