vue实现垂直菜单

实现垂直菜单的基本结构

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

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

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

添加样式美化菜单

通过CSS为垂直菜单添加样式，增强视觉效果。以下示例实现简洁的垂直菜单样式：

<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 in menuItems" :key="item.id">
        <a :href="item.link">{{ item.title }}</a>
        <ul v-if="item.children" class="sub-menu">
          <li v-for="child in item.children" :key="child.id">
            <a :href="child.link">{{ child.title }}</a>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menuItems: [
        { 
          id: 1, 
          title: '首页', 
          link: '/',
          children: [
            { id: 4, title: '子菜单1', link: '/sub1' },
            { id: 5, title: '子菜单2', link: '/sub2' }
          ]
        },
        { id: 2, title: '产品', link: '/products' },
        { id: 3, title: '关于我们', link: '/about' }
      ]
    }
  }
}
</script>

添加交互效果

通过Vue的v-show或v-if指令控制子菜单的显示隐藏，并添加过渡动画：

<template>
  <div class="vertical-menu">
    <ul>
      <li v-for="item in menuItems" :key="item.id" @mouseenter="toggleSubMenu(item.id)">
        <a :href="item.link">{{ item.title }}</a>
        <ul v-show="activeMenu === item.id" class="sub-menu">
          <li v-for="child in item.children" :key="child.id">
            <a :href="child.link">{{ child.title }}</a>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeMenu: null,
      menuItems: [
        { 
          id: 1, 
          title: '首页', 
          link: '/',
          children: [
            { id: 4, title: '子菜单1', link: '/sub1' },
            { id: 5, title: '子菜单2', link: '/sub2' }
          ]
        }
      ]
    }
  },
  methods: {
    toggleSubMenu(id) {
      this.activeMenu = this.activeMenu === id ? null : id;
    }
  }
}
</script>

<style scoped>
.sub-menu {
  transition: all 0.3s ease;
  overflow: hidden;
}
</style>

使用第三方UI库快速实现

如需快速开发，可以使用Element UI或Ant Design Vue等现成组件库：

<template>
  <el-menu
    mode="vertical"
    default-active="1"
    class="el-menu-vertical"
    @open="handleOpen"
    @close="handleClose">
    <el-submenu index="1">
      <template slot="title">
        <i class="el-icon-location"></i>
        <span>导航一</span>
      </template>
      <el-menu-item index="1-1">选项1</el-menu-item>
      <el-menu-item index="1-2">选项2</el-menu-item>
    </el-submenu>
    <el-menu-item index="2">
      <i class="el-icon-menu"></i>
      <span>导航二</span>
    </el-menu-item>
  </el-menu>
</template>

<script>
import { ElMenu, ElMenuItem, ElSubmenu } from 'element-ui';

export default {
  components: {
    ElMenu,
    ElMenuItem,
    ElSubmenu
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    }
  }
}
</script>