使用vue编写一个多级菜单组件默认不显示子菜单子菜单显示有过渡效果

以下是一个简单的多级菜单组件，使用Vue编写，包含了默认不显示子菜单和子菜单显示有过渡效果：

<template>
  <div class="menu">
    <ul>
      <li v-for="item in menuItems" :key="item.id">
        <span @click="toggleSubMenu(item)">{{ item.name }}</span>
        <ul v-if="item.children" :class="{ 'show-sub-menu': item.showSubMenu }">
          <li v-for="subItem in item.children" :key="subItem.id">
            <span>{{ subItem.name }}</span>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menuItems: [
        {
          id: 1,
          name: '菜单1',
          children: [
            { id: 11, name: '子菜单1-1' },
            { id: 12, name: '子菜单1-2' },
            { id: 13, name: '子菜单1-3' },
          ],
          showSubMenu: false,
        },
        {
          id: 2,
          name: '菜单2',
          children: [
            { id: 21, name: '子菜单2-1' },
            { id: 22, name: '子菜单2-2' },
            { id: 23, name: '子菜单2-3' },
          ],
          showSubMenu: false,
        },
        {
          id: 3,
          name: '菜单3',
          children: [
            { id: 31, name: '子菜单3-1' },
            { id: 32, name: '子菜单3-2' },
            { id: 33, name: '子菜单3-3' },
          ],
          showSubMenu: false,
        },
      ],
    };
  },
  methods: {
    toggleSubMenu(item) {
      item.showSubMenu = !item.showSubMenu;
    },
  },
};
</script>

<style scoped>
.menu {
  ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  li {
    margin: 10px 0;
    cursor: pointer;
  }
  .show-sub-menu {
    max-height: 1000px;
    transition: max-height 0.3s ease-in-out;
  }
  ul {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-in-out;
  }
}
</style>

在这个组件中，我们使用了一个menuItems数组来存储菜单项。每个菜单项都有一个showSubMenu属性，用于表示是否显示子菜单；以及一个children数组，用于存储子菜单的菜单项。

在模板中，我们使用了v-for指令来循环遍历menuItems数组，渲染出每个菜单项。当用户点击菜单项时，我们调用了toggleSubMenu方法来切换showSubMenu属性的值，从而控制子菜单的显示和隐藏。

我们还定义了一些CSS样式，用于控制子菜单的过渡效果。当子菜单需要显示时，我们给它添加了一个show-sub-menu类，这个类会将max-height属性设置为一个足够大的值，从而让子菜单以动画的形式展开。当子菜单需要隐藏时，我们只需要将max-height属性设置为0，就能让子菜单以动画的形式收起。