vue3自定义多级菜单

效果

多级菜单.png

分组件

多级菜单组件目录.PNG

分目录详细

1. menuItem.vue

简述：就是<slot></slot> 嵌套样式 非多级菜单子项

<template>
  <div class="menu_item">
<slot></slot>
  </div>
</template>

<script lang="ts">
export default {
name:'menuItem'
}
</script>

<style scoped>
.menu_item{
color:rgb(154, 169, 184);
font-size: 16px;
height: 50px;
text-align: center;
line-height: 50px;
}
</style>

2.treeMenu.vue

包裹菜单的 包括样式 这个组件不是必要的

<template>
  
<div class="tree_menu">
    <slot></slot>
</div>
</template>

<script lang="ts" >
export default {
name:'treeMenu'
}
</script>

<style scoped>
.tree_menu{
    width:300px;
    background-color: rgb(70, 68, 68);
}
</style>

3.subMenu.vue

多级菜单的组件 方法是 显示或者隐藏子项

<template>
  <div class="sub_menu_container" 
  
  @mouseenter="showSubMenu"
  @mouseleave="hideSubMenu"
  >
<div class="title">
    <slot name="title"></slot>
    <span class="icon">&gt;</span>
</div>

<div class="sub_menu" v-show="isShowSubMenu">
    <slot></slot>
</div>

  </div>

</template>

<script lang="ts">
import { reactive, ref } from '@vue/reactivity'
export default {
name:'subMenu'
}
</script>

<script setup lang="ts">
const isShowSubMenu=ref(false)


const showSubMenu=()=>{
isShowSubMenu.value=true
}

const hideSubMenu=()=>{
    isShowSubMenu.value=false
}

</script>





<style scoped >
.sub_menu_container{
    position: relative;

}

.sub_menu_container .title{
        height: 50px;
    line-height: 50px;
    width:160px;
    color: rgb(79, 79, 153);
    text-align: center;
}
.sub_menu_container .icon{
    position: absolute;
    right:15px;
}
.sub_menu_container .sub_menu{
        position: absolute;
        top:0;
        left:100%;
        width:100%;
        background-color: darkgray;
}
</style>

4.reSubMenu.vue

嵌套的多级菜单 引入组件

<template>


  <sub-menu>
<template #title>{{sub.label}}</template>
<template
v-for="r in sub.children"
:key="r.id"
>
<div class="menu_item"  v-if="!r.children" >{{r.label}}</div>
<re-sub-menu v-else  :sub="r"  ></re-sub-menu>
</template>
</sub-menu>
</template>



<script lang="ts">

export default {
    name:'reSubMenu',
//props:['sub']
}

</script>


<script lang="ts" setup>

import subMenu from "./subMenu.vue"


//const emit=defineEmits(['eventClick'])


//const eventClick=(value: any)=>{

//emit('eventClick',value)
//}


</script>

<style scoped>
.menu_item{
  color:rgb(5, 38, 68);
font-size: 16px;
height: 50px;
text-align: center;
line-height: 50px;
}
</style>

5.App.vue

形成菜单组件 定义数据格式

<tree-menu>
<template v-for="item in menuList">
<menu-item 
v-if="!item.children"
:key="item.id"
>
{{item.label}}
</menu-item>
<re-sub-menu
 v-else
   :sub="item">
   </re-sub-menu>
</template>
</tree-menu>

 const menuList=[
    {
      id:2,
      label:'菜单2',
      event:'cd2',
      children:[
{
 id:21,
 label:'菜单21' ,
 event:'cd22'
}]
    },{
      id:3,
      label:'菜单3',
      event:'',
            children:[
{
 id:31,
 label:'菜单31' ,
 event:'',
       children:[
{
 id:3111,
 label:'菜单3111' ,
 event:'cd3111'

}]
}]
    }
  ]

可以扩展成右键菜单事件组件 待续...