使用vue3组合式api语法解决elementPlus menu菜单 点击里面的导航后隐藏菜单栏

使用 Vue3 组合式 API 语法，可以通过 `useMenu` 函数和 `useClickOutside` 函数来实现点击菜单项后隐藏菜单栏的功能。

具体实现方法如下：

1. 在组件中导入 `useMenu` 和 `useClickOutside` 函数，例如：

   import { useMenu, useClickOutside } from 'element-plus/lib/composables'

2. 在 `setup` 函数中使用 `useMenu` 函数创建菜单实例，并使用 `useClickOutside` 函数监听点击事件，例如：

   setup() {
     const { menu } = useMenu()
     const ref = ref(null)
     useClickOutside(ref, () => menu.collapse())
   
     return {
       menu,
       ref
     }
   }

在函数中，首先使用 `useMenu` 函数创建菜单实例，并使用 `ref` 函数创建菜单容器的引用。然后使用 `useClickOutside` 函数监听菜单容器外部的点击事件，当点击菜单项外部时，调用 `menu.collapse()` 方法关闭菜单栏。

3. 在模板中使用菜单容器的引用，例如：

   <div ref="ref">
     <el-menu :default-active="activeIndex" @select="handleMenuSelect">
       <el-menu-item index="1">菜单项1</el-menu-item>
       <el-menu-item index="2">菜单项2</el-menu-item>
       <el-menu-item index="3">菜单项3</el-menu-item>
     </el-menu>
   </div>

在模板中，使用 `ref` 指令将菜单容器的引用绑定到 `div` 元素上，使得 `useClickOutside` 函数可以监听点击事件。

完整的示例代码如下：

<template>
  <div ref="ref">
    <el-menu :default-active="activeIndex" @select="handleMenuSelect">
      <el-menu-item index="1">菜单项1</el-menu-item>
      <el-menu-item index="2">菜单项2</el-menu-item>
      <el-menu-item index="3">菜单项3</el-menu-item>
    </el-menu>
  </div>
</template>

<script>
import { useMenu, useClickOutside } from 'element-plus/lib/composables'
import { ref } from 'vue'

export default {
  setup() {
    const { menu } = useMenu()
    const ref = ref(null)
    useClickOutside(ref, () => menu.collapse())

    const activeIndex = ref('1')

    function handleMenuSelect(index) {
      console.log(index)
      activeIndex.value = index
    }

    return {
      menu,
      ref,
      activeIndex,
      handleMenuSelect
    }
  }
}
</script>

希望这个方法能够帮助到你！