fuse-code/src/components/menu/menu-item-child.vue

<template>
  <template v-if="menuItem.children && menuItem.children.length">
    <ui-icon type="pull-more" class="menu-more-icon" size="12px" />
    <ui-floating 
      :mount="mountEl" 
      :refer="refer" 
      dire="right-top" 
      class="menu-children strengthen" 
      :class="{ show }"
      @enter="emit('enter')" 
      @leave="emit('leave')"
    >
      <menu-child 
        :menu="menuItem.children" 
        :active-paths="activePaths" 
        :level="level" 
        @enter="emit('enter')"
        @leave="emit('leave')" 
        @select="item => emit('select', item)"
      />
    </ui-floating>
  </template>
</template>

<script setup lang="ts">
import MenuChild from './menu-item.vue'

import type { Item, Items } from './index.vue'

const mountEl = document.body
defineProps<{
  menuItem: Item
  activePaths: Array<string>
  refer: any
  level: number
  show: boolean
}>()

const emit = defineEmits<{
  (event: 'enter'): void
  (event: 'leave'): void
  (event: 'select', menu: Item): void
}>()
</script>

<style lang="sass" scoped>
@import './style.scss'
</style>

<style>
.menu-children {
  backdrop-filter: blur(4px);
  background-color: var(--editor-menu-back);
  transform: translateY(0) scaleY(0);
  opacity: 0;
  transform-origin: center top;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.menu-children.show {
  transform: translateY(0) scaleY(1);
  opacity: 1;
}
</style>