🕛 [修复] menu 组件目录展开

src/module/menu/index.vue

@@ -5,10 +5,17 @@
 </template>
 
 <script setup name="LayMenu" lang="ts">
-import { defineProps } from 'vue'
+import { defineProps, provide, ref } from 'vue'
 
 const props =
   defineProps<{
     tree?: boolean
+    selectedKeys?: string[]
   }>()
+
+const isTree = ref(props.tree)
+const selectKeys = ref(props.selectedKeys)
+
+provide("isTree",isTree);
+provide("selectKeys",selectKeys)
 </script>

src/module/menuItem/index.vue

@@ -3,30 +3,43 @@
     <a href="javascript:void(0)">{{ title }} </a>
   </li>
 
-  <li class="layui-nav-item" :class="[isOpen?'layui-nav-itemed':'']" v-if="slots.default">
+  <li
+    class="layui-nav-item"
+    :class="[isOpen && isTree ? 'layui-nav-itemed' : '']"
+    v-if="slots.default"
+  >
     <a href="javascript:void(0)" @click="openHandle">
       {{ title }}
       <i class="layui-icon layui-icon-down layui-nav-more"></i>
     </a>
-    <dl class="layui-nav-child">
+    <dl
+      class="layui-nav-child"
+      :class="[
+        isOpen && !isTree ? 'layui-show' : '',
+        !isTree ? 'layui-anim layui-anim-upbit' : '',
+      ]"
+    >
       <slot></slot>
     </dl>
   </li>
 </template>
 
 <script setup name="LayMenuItem" lang="ts">
-import { defineProps, ref, useSlots } from 'vue'
+import { defineProps, inject, ref, useSlots } from 'vue'
 const slots = useSlots()
 
 const props =
   defineProps<{
+    key: string
     title: string
-}>()
+  }>()
 
 const isOpen = ref(false)
 
-const openHandle = function() {
+const isTree = inject('isTree')
+const selectKeys = inject('selectKeys')
+
+const openHandle = function () {
   isOpen.value = !isOpen.value
 }
-
 </script>

src/module/panel/index.vue

@@ -3,7 +3,5 @@
       <slot></slot>
   </div>
 </template>
-
 <script setup name="LayPanel" lang="ts">
-
 </script>