[新增] menu 组件

src/module/menu/index.vue

@@ -7,15 +7,20 @@
 <script setup name="LayMenu" lang="ts">
 import { defineProps, provide, ref } from 'vue'
 
-const props =
+const props = withDefaults(
   defineProps<{
+    selectedKey?: string
     tree?: boolean
-    selectedKeys?: string[]
-  }>()
+  }>(),
+  {
+    selectedKey: "",
+    tree: false,
+  }
+)
 
 const isTree = ref(props.tree)
-const selectKeys = ref(props.selectedKeys)
+const selectKey = ref(props.selectedKey)
 
 provide("isTree",isTree);
-provide("selectKeys",selectKeys)
+provide("selectKey",selectKey)
 </script>

src/module/menuChildItem/index.vue

@@ -1,14 +1,21 @@
 <template>
-  <dd>
+  <dd :class="[selectKey === id ? 'layui-this':'']" @click="selectHandle()">
     <a href="javascript:void(0)">{{ title }}</a>
   </dd>
 </template>
 
 <script setup name="LayMenuChildItem" lang="ts">
-import { defineProps } from 'vue'
+import { defineProps, inject, Ref } from 'vue'
 
 const props =
   defineProps<{
+    id: string
     title: string
   }>()
+
+const selectKey: Ref<String> = inject("selectKey") as Ref<String>
+
+const selectHandle = function() {
+    selectKey.value = props.id
+}
 </script>

src/module/menuItem/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <li class="layui-nav-item">
+  <li class="layui-nav-item" @click="selectHandle()" :class="[selectKey === id ? 'layui-this':'']">
     <a href="javascript:void(0)">{{ title }} </a>
   </li>
 
@@ -25,21 +25,25 @@
 </template>
 
 <script setup name="LayMenuItem" lang="ts">
-import { defineProps, inject, ref, useSlots } from 'vue'
+import { defineProps, inject, provide, Ref, ref, useSlots } from 'vue'
 const slots = useSlots()
 
 const props =
   defineProps<{
-    key: string
+    id: string
     title: string
   }>()
 
 const isOpen = ref(false)
 
 const isTree = inject('isTree')
-const selectKeys = inject('selectKeys')
+const selectKey: Ref<String> = inject('selectKey') as Ref<String>
 
 const openHandle = function () {
   isOpen.value = !isOpen.value
 }
+
+const selectHandle = function() {
+    selectKey.value = props.id
+}
 </script>