Vue实现侧边折叠菜单栏手风琴效果

2023-10-29 10:50:09

在Vue.js中实现侧边折叠菜单栏手风琴效果是一种常见且实用的设计模式，它可以帮助您创建美观且易于使用的导航界面。这种菜单栏通常用于管理后台、产品流程或其他具有复杂结构的Web应用中。

要实现Vue.js侧边折叠菜单栏手风琴效果，您需要按照以下步骤操作：

创建Vue项目 ：
- 使用Vue CLI或其他工具创建一个新的Vue项目。
- 在main.js文件中引入Vue.js库和必要的组件。
设计菜单结构 ：
- 定义菜单栏中包含的项目和子项目。
- 创建一个Vue组件来表示菜单栏的每个项目。
- 在组件中使用v-for循环来渲染子项目。
添加折叠功能 ：
- 在菜单栏组件中使用v-show指令来控制子项目的显示和隐藏。
- 使用v-on指令来监听子项目上的点击事件。
- 在点击事件处理函数中，使用Vue.js的data()方法来更新子项目的显示状态。
添加手风琴效果 ：
- 使用CSS来设置菜单栏的样式。
- 为菜单栏添加过渡效果，以便在子项目折叠或展开时产生动画效果。
测试和调整 ：
- 运行Vue项目并测试菜单栏的功能。
- 根据需要调整菜单栏的样式和动画效果。

代码示例：

<template>
  <div class="sidebar">
    <ul>
      <li v-for="item in menuItems" :key="item.id">
        <a href="#" @click="toggleItem(item)">{{ item.name }}</a>
        <ul v-if="item.isOpen" class="sub-menu">
          <li v-for="subItem in item.subItems" :key="subItem.id">
            <a href="#">{{ subItem.name }}</a>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menuItems: [
        {
          id: 1,
          name: 'Item 1',
          isOpen: false,
          subItems: [
            { id: 11, name: 'Sub Item 1.1' },
            { id: 12, name: 'Sub Item 1.2' },
          ],
        },
        {
          id: 2,
          name: 'Item 2',
          isOpen: false,
          subItems: [
            { id: 21, name: 'Sub Item 2.1' },
            { id: 22, name: 'Sub Item 2.2' },
          ],
        },
      ],
    };
  },
  methods: {
    toggleItem(item) {
      item.isOpen = !item.isOpen;
    },
  },
};
</script>

<style>
.sidebar {
  width: 200px;
  background-color: #eee;
  padding: 10px;
}

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

.sidebar li {
  padding: 5px;
}

.sidebar a {
  text-decoration: none;
  color: #000;
}

.sidebar .sub-menu {
  display: none;
}

.sidebar .sub-menu.open {
  display: block;
}

.sidebar .transition {
  transition: all 0.3s ease-in-out;
}
</style>