使用vue编写多级菜单组件子菜单显示有过渡效果

以下是一个使用Vue编写多级菜单组件，并添加了子菜单过渡效果的示例：

<template>
  <div class="menu">
    <ul>
      <li v-for="(item, index) in menuItems" :key="index" @mouseover="showSubMenu(index)" @mouseleave="hideSubMenu(index)">
        {{ item.name }}
        <transition name="slide">
          <ul class="sub-menu" v-if="item.showSubMenu">
            <li v-for="(subItem, subIndex) in item.subMenu" :key="subIndex">{{ subItem }}</li>
          </ul>
        </transition>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menuItems: [
        {
          name: "菜单1",
          showSubMenu: false,
          subMenu: ["子菜单1", "子菜单2", "子菜单3"],
        },
        {
          name: "菜单2",
          showSubMenu: false,
          subMenu: ["子菜单4", "子菜单5", "子菜单6"],
        },
        {
          name: "菜单3",
          showSubMenu: false,
          subMenu: ["子菜单7", "子菜单8", "子菜单9"],
        },
      ],
    };
  },
  methods: {
    showSubMenu(index) {
      this.menuItems[index].showSubMenu = true;
    },
    hideSubMenu(index) {
      this.menuItems[index].showSubMenu = false;
    },
  },
};
</script>

<style scoped>
.slide-enter-active,
.slide-leave-active {
  transition: all 0.5s ease;
}
.slide-enter,
.slide-leave-to {
  transform: translateX(20px);
  opacity: 0;
}
.menu {
  width: 200px;
  border: 1px solid #ccc;
  font-size: 16px;
  padding: 10px;
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
li {
  cursor: pointer;
  padding: 5px;
}
.sub-menu {
  background-color: #f7f7f7;
  padding: 5px;
}
</style>

在该示例中，我们使用了 v-for 指令来渲染菜单项和子菜单项，并使用 mouseover 和 mouseleave 事件来控制子菜单的显示和隐藏。在子菜单项上，我们添加了一个 transition 组件，该组件使用了名为 slide 的过渡名称，并设置了过渡的动画效果。最后，我们在样式中定义了 slide 过渡所需的 CSS 样式。