使用vue编写通用的多级菜单组件子菜单展开时需要有过渡效果

以下是一个使用 Vue 编写通用的多级菜单组件，子菜单展开时带有过渡效果的示例代码：

<template>
  <ul>
    <li v-for="(item, index) in menuItems" :key="index">
      <a @click.prevent="toggleSubMenu(item)">
        {{ item.label }}
      </a>
      <ul v-if="item.children" :class="{ 'submenu-open': item.isOpen }">
        <transition name="submenu">
          <menu-item
            v-for="(childItem, childIndex) in item.children"
            :key="childIndex"
            :item="childItem"
          ></menu-item>
        </transition>
      </ul>
    </li>
  </ul>
</template>

<script>
export default {
  name: "MenuItem",
  props: {
    item: Object,
  },
  data() {
    return {
      menuItems: this.item.children || [],
    };
  },
  methods: {
    toggleSubMenu(item) {
      item.isOpen = !item.isOpen;
    },
  },
};
</script>

<style>
.submenu-enter-active,
.submenu-leave-active {
  transition: all 0.3s;
}
.submenu-enter,
.submenu-leave-to {
  opacity: 0;
  transform: translateY(-10px);
}
.submenu-open {
  display: block;
}
</style>

在上面的代码中，我们使用了 Vue 的 transition 组件来实现子菜单的过渡效果。具体实现步骤如下：

在 ul 标签上使用 v-if 指令判断当前菜单项是否有子菜单，如果有则显示子菜单。
在 ul 标签上使用 :class 绑定一个对象，根据当前菜单项的 isOpen 属性来决定是否显示子菜单。这里使用了一个 submenu-open 类来表示子菜单展开的状态。
在 ul 标签内部使用 transition 组件包裹子菜单，设置 name 属性为 submenu，表示这个过渡效果的名称。
在 style 标签中定义过渡效果的样式，包括进入动画、离开动画和展开状态的样式。

最后，在 MenuItem 组件内部，我们通过 toggleSubMenu 方法来切换当前菜单项的 isOpen 属性，从而实现子菜单的展开和收起。