vue实现垂直菜单

实现垂直菜单的基本结构

在Vue中实现垂直菜单，通常需要使用<ul>和li>标签构建菜单项，结合Vue的v-for指令动态渲染菜单数据。以下是一个基础模板：

<template>
  <div class="vertical-menu">
    <ul>
      <li v-for="(item, index) in menuItems" :key="index">
        <a :href="item.link">{{ item.title }}</a>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menuItems: [
        { title: '首页', link: '/' },
        { title: '产品', link: '/products' },
        { title: '关于我们', link: '/about' }
      ]
    };
  }
};
</script>

添加样式美化菜单

通过CSS为垂直菜单添加样式，使其更美观。以下示例使用Flexbox布局和基础样式：

<style scoped>
.vertical-menu {
  width: 200px;
  background-color: #f8f9fa;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

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

.vertical-menu li {
  padding: 10px 15px;
  border-bottom: 1px solid #e1e1e1;
  transition: background-color 0.3s;
}

.vertical-menu li:hover {
  background-color: #e9ecef;
}

.vertical-menu a {
  text-decoration: none;
  color: #333;
  display: block;
}
</style>

实现子菜单功能

若需支持多级菜单，可通过嵌套数据和条件渲染实现。以下代码展示如何递归渲染子菜单：

<template>
  <div class="vertical-menu">
    <ul>
      <li v-for="(item, index) in menuItems" :key="index">
        <a :href="item.link">{{ item.title }}</a>
        <ul v-if="item.children" class="sub-menu">
          <li v-for="(child, childIndex) in item.children" :key="childIndex">
            <a :href="child.link">{{ child.title }}</a>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menuItems: [
        { 
          title: '首页', 
          link: '/' 
        },
        { 
          title: '产品', 
          link: '/products',
          children: [
            { title: '产品A', link: '/products/a' },
            { title: '产品B', link: '/products/b' }
          ]
        }
      ]
    };
  }
};
</script>

添加交互效果

通过Vue的v-show或v-if控制子菜单的显示与隐藏，并添加点击事件：

<template>
  <div class="vertical-menu">
    <ul>
      <li v-for="(item, index) in menuItems" :key="index" @click="toggleSubMenu(index)">
        <a :href="item.link">{{ item.title }}</a>
        <ul v-show="item.isOpen && item.children" class="sub-menu">
          <li v-for="(child, childIndex) in item.children" :key="childIndex">
            <a :href="child.link">{{ child.title }}</a>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menuItems: [
        { 
          title: '首页', 
          link: '/',
          isOpen: false 
        },
        { 
          title: '产品', 
          link: '/products',
          isOpen: false,
          children: [
            { title: '产品A', link: '/products/a' },
            { title: '产品B', link: '/products/b' }
          ]
        }
      ]
    };
  },
  methods: {
    toggleSubMenu(index) {
      this.menuItems[index].isOpen = !this.menuItems[index].isOpen;
    }
  }
};
</script>

使用Vue Router集成

若项目使用Vue Router，可将菜单项与路由配置结合，实现导航高亮：

<template>
  <div class="vertical-menu">
    <ul>
      <li 
        v-for="(item, index) in menuItems" 
        :key="index" 
        :class="{ 'active': $route.path === item.link }"
        @click="toggleSubMenu(index)"
      >
        <router-link :to="item.link">{{ item.title }}</router-link>
        <ul v-show="item.isOpen && item.children" class="sub-menu">
          <li 
            v-for="(child, childIndex) in item.children" 
            :key="childIndex"
            :class="{ 'active': $route.path === child.link }"
          >
            <router-link :to="child.link">{{ child.title }}</router-link>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</template>

响应式设计适配

通过媒体查询调整菜单在小屏幕设备上的表现，例如折叠为汉堡菜单：

@media (max-width: 768px) {
  .vertical-menu {
    width: 100%;
  }
  .sub-menu {
    padding-left: 20px;
  }
}