新手写无限极菜单，控制当前菜单的子菜单的显示和隐藏,想改滑动出现隐藏，大家帮优化?

Z时代
2024-02-28
分类：IT

IMenuItem.vue

<script setup>
let menus = defineProps({
  'menu': Array
})
let hide = (item, event) => {
  event.stopPropagation()
  let childMenus = event.target.querySelectorAll(".item");
  if (item['show']) {
    childMenus.forEach(childMenu => {
      childMenu.style.visibility = "visible";
    })
  } else {
    childMenus.forEach(childMenu => {
      childMenu.style.visibility = "hidden";
    })
  }
  item['show'] = !item['show']
}
</script>
<template>
  <div v-for="(item,index) in menus.menu" style="margin-left: 0.6rem" @click="hide(item,$event)"
       :class="item['show']?'show':'hidden'">
    <div class="item">{{ item['name'] }}
      <div v-if="item['children'].length>0">
        <IMenuItem :menu="item['children']"/>
      </div>
    </div>
  </div>
</template>
<style scoped lang="scss"></style>

Test.vue

<script setup>
import {reactive, ref} from "vue";
import IMenuItem from "@/pages/IMenuItem.vue";
let json = reactive([
  {
    name: '一级',
    children: [
      {
        name: '二级',
        children: [
          {
            name: '三级',
            children: [
              {
                name: '四级',
                children: []
              }
            ]
          }
        ]
      },
      {
        name: '二级',
        children: []
      }
    ]
  },
  {
    name: '一级',
    children: [
      {
        name: '二级',
        children: [
          {
            name: '三级',
            children: [
              {
                name: '四级',
                children: []
              }
            ]
          }
        ]
      },
      {
        name: '二级',
        children: []
      }
    ]
  },
])
</script>
<template>
  <IMenuItem :menu="json"/>
</template>
<style scoped lang="scss"></style>