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

docs/docs/zh-CN/components/menu.md

@@ -30,7 +30,9 @@ export default {
 ::: demo
 
 <template>
-  <lay-menu selectedKey="5" :tree="isTree">
+  选中项: {{selectedKey}}
+  打开项: {{openKeys}}
+  <lay-menu v-model:selectedKey="selectedKey" v-model:openKeys="openKeys" v-model:tree="isTree">
     <lay-menu-item title="首页" id="1">
       <template v-slot:title> 
         <router-link to="">无感</router-link>
@@ -53,9 +55,13 @@ export default {
   setup() {
 
     const isTree = ref(true)
+    const selectedKey = ref("5")
+    const openKeys = ref(["7"])
 
     return {
-      isTree
+      isTree,
+      openKeys,
+      selectedKey
     }
   }
 }
@@ -69,7 +75,8 @@ export default {
 
 |             |          |     |
 | ----------- | -------- | --- |
-| selectedKey | 默认选择 | --  |
+| selectedKey (v-model) | 选中项 | --  |
+| openKeys (v-model) | 打开项 | --  |
 
 ::: field menu slots
 

docs/docs/zh-CN/guide/changelog.md

@@ -5,8 +5,11 @@
 <template>
     <lay-timeline>
         <lay-timeline-item title="0.1.4">
-          [新增] menu 菜单 title 插槽，允许自定义菜单项。<br>
-          [新增] menu 菜单 title 插槽，允许自定义菜单项。<br>
+          [新增] button 按钮 loading 属性, 提供 加载 状态。<br>
+          [新增] tab 选项卡 allow-close 属性，支持 关闭。<br>
+          [新增] tab 选项卡 close change 事件，扩展 tab 动态逻辑。<br>
+          [新增] ClickOutside 工具。<br>
+          [修复] menu 菜单 layui-this 样式，多 a 标签样式重叠。<br>
         </lay-timeline-item>
         <lay-timeline-item title="0.1.1">
           [新增] menu 菜单 title 插槽，允许自定义菜单项。<br>

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>