perf(menu): 新增 menu 菜单 selectedKey openKeys 属性

src/module/menu/index.vue

@@ -5,22 +5,38 @@
 </template>
 
 <script setup name="LayMenu" lang="ts">
-import { defineProps, provide, ref } from 'vue'
+import { defineProps, provide, ref, watch } from 'vue'
 
 const props = withDefaults(
   defineProps<{
     selectedKey?: string
+    openKeys?: string[]
     tree?: boolean
   }>(),
   {
     selectedKey: '',
+    openKeys: function() {
+      return []
+    },
     tree: false,
   }
 )
 
 const isTree = ref(props.tree)
-const selectKey = ref(props.selectedKey)
+const selectedKey = ref(props.selectedKey)
+const openKeys = ref([...props.openKeys])
 
 provide('isTree', isTree)
-provide('selectKey', selectKey)
+provide('selectedKey', selectedKey)
+provide('openKeys',openKeys)
+
+const emit = defineEmits(['update:selectedKey','update:openKeys'])
+
+watch(selectedKey, function(val) {
+  emit('update:selectedKey',val)
+})
+
+watch(openKeys, function(val) {
+  emit('update:openKeys',val)
+},{deep : true})
 </script>

src/module/menuChildItem/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <dd :class="[selectKey === id ? 'layui-this' : '']" @click="selectHandle()">
+  <dd :class="[selectedKey === id ? 'layui-this' : '']" @click="selectHandle()">
     <slot v-if="slots.title" name="title"></slot>
     <a v-else href="javascript:void(0)">
       {{title}}
@@ -18,9 +18,9 @@ const props =
     title: string
   }>()
 
-const selectKey: Ref<string> = inject('selectKey') as Ref<string>
+const selectedKey: Ref<string> = inject('selectedKey') as Ref<string>
 
 const selectHandle = function () {
-  selectKey.value = props.id
+  selectedKey.value = props.id
 }
 </script>

src/module/menuItem/index.vue

@@ -2,7 +2,7 @@
   <li
     v-if="slots.default"
     class="layui-nav-item"
-    :class="[isOpen && isTree ? 'layui-nav-itemed' : '']"
+    :class="[openKeys.includes(id) && isTree ? 'layui-nav-itemed' : '']"
   >
     <a href="javascript:void(0)" @click="openHandle">
       {{ title }}
@@ -11,7 +11,7 @@
     <dl
       class="layui-nav-child"
       :class="[
-        isOpen && !isTree ? 'layui-show' : '',
+        openKeys.includes(id) && !isTree ? 'layui-show' : '',
         !isTree ? 'layui-anim layui-anim-upbit' : '',
       ]"
     >
@@ -22,7 +22,7 @@
   <li
     v-else
     class="layui-nav-item"
-    :class="[selectKey === id ? 'layui-this' : '']"
+    :class="[selectedKey === id ? 'layui-this' : '']"
     @click="selectHandle()"
   >
     <slot v-if="slots.title" name="title"></slot>
@@ -42,16 +42,20 @@ const props =
     title: string
   }>()
 
-const isOpen = ref(false)
-
 const isTree = inject('isTree')
-const selectKey: Ref<string> = inject('selectKey') as Ref<string>
+const selectedKey: Ref<string> = inject('selectedKey') as Ref<string>
+const openKeys: Ref<string[]> = inject('openKeys') as Ref<string[]>
 
 const openHandle = function () {
-  isOpen.value = !isOpen.value
+
+  if(openKeys.value.includes(props.id))  {
+      openKeys.value.splice(openKeys.value.indexOf(props.id),1)
+  } else {
+      openKeys.value.push(props.id)
+  }
 }
 
 const selectHandle = function () {
-  selectKey.value = props.id
+  selectedKey.value = props.id
 }
 </script>