From efaf442a4c807ac2e451237c574fe3179851c6f4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=B1=E7=9C=A0=E4=BB=AA=E5=BC=8F?= <854085467@qq.com>
Date: Fri, 8 Oct 2021 11:09:44 +0800
Subject: [PATCH] =?UTF-8?q?[=E6=96=B0=E5=A2=9E]=20menu=20=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/docs/zh-CN/components/iconPicker.md |  7 +++++-
 docs/docs/zh-CN/components/menu.md       | 28 ++++++++++++------------
 docs/docs/zh-CN/guide/home.md            |  4 ++--
 docs/src/assets/logo-3.svg               |  1 +
 src/module/menu/index.vue                | 15 ++++++++-----
 src/module/menuChildItem/index.vue       | 11 ++++++++--
 src/module/menuItem/index.vue            | 12 ++++++----
 7 files changed, 50 insertions(+), 28 deletions(-)
 create mode 100644 docs/src/assets/logo-3.svg

diff --git a/docs/docs/zh-CN/components/iconPicker.md b/docs/docs/zh-CN/components/iconPicker.md
index dc085be2..5e44d337 100644
--- a/docs/docs/zh-CN/components/iconPicker.md
+++ b/docs/docs/zh-CN/components/iconPicker.md
@@ -62,4 +62,9 @@ export default {
 }
 </script>
 
-:::
\ No newline at end of file
+:::
+
+|  |  |  |
+|--|--|--|
+| v-model | 默认值 | -- |
+| page | 开启分页 | -- |
\ No newline at end of file
diff --git a/docs/docs/zh-CN/components/menu.md b/docs/docs/zh-CN/components/menu.md
index f301001a..335544a2 100644
--- a/docs/docs/zh-CN/components/menu.md
+++ b/docs/docs/zh-CN/components/menu.md
@@ -1,14 +1,14 @@
 ::: demo
 
 <template>
-  <lay-menu>
-    <lay-menu-item title="首页"></lay-menu-item>
-    <lay-menu-item title="用户"></lay-menu-item>
-    <lay-menu-item title="角色"></lay-menu-item> 
+  <lay-menu selectedKey="5">
+    <lay-menu-item title="首页" id="1"></lay-menu-item>
+    <lay-menu-item title="用户" id="2"></lay-menu-item>
+    <lay-menu-item title="角色" id="3"></lay-menu-item> 
     <lay-menu-item title="目录">
-        <lay-menu-child-item title="菜单一"></lay-menu-child-item> 
-        <lay-menu-child-item title="菜单二"></lay-menu-child-item>
-        <lay-menu-child-item title="菜单三"></lay-menu-child-item>
+        <lay-menu-child-item title="菜单一" id="4"></lay-menu-child-item> 
+        <lay-menu-child-item title="菜单二" id="5"></lay-menu-child-item>
+        <lay-menu-child-item title="菜单三" id="6"></lay-menu-child-item>
     </lay-menu-item> 
   </lay-menu>
 </template>
@@ -30,14 +30,14 @@ export default {
 ::: demo
 
 <template>
-  <lay-menu tree>
-    <lay-menu-item title="首页"></lay-menu-item>
-    <lay-menu-item title="用户"></lay-menu-item>
-    <lay-menu-item title="角色"></lay-menu-item> 
+  <lay-menu selectedKey="5" tree>
+    <lay-menu-item title="首页" id="1"></lay-menu-item>
+    <lay-menu-item title="用户" id="2"></lay-menu-item>
+    <lay-menu-item title="角色" id="3"></lay-menu-item> 
     <lay-menu-item title="目录">
-        <lay-menu-child-item title="菜单一"></lay-menu-child-item> 
-        <lay-menu-child-item title="菜单二"></lay-menu-child-item>
-        <lay-menu-child-item title="菜单三"></lay-menu-child-item>
+        <lay-menu-child-item title="菜单一" id="4"></lay-menu-child-item> 
+        <lay-menu-child-item title="菜单二" id="5"></lay-menu-child-item>
+        <lay-menu-child-item title="菜单三" id="6"></lay-menu-child-item>
     </lay-menu-item> 
   </lay-menu>
 </template>
diff --git a/docs/docs/zh-CN/guide/home.md b/docs/docs/zh-CN/guide/home.md
index f093fc68..55a15fad 100644
--- a/docs/docs/zh-CN/guide/home.md
+++ b/docs/docs/zh-CN/guide/home.md
@@ -1,7 +1,7 @@
-<img src="../../../src/assets/logo-2.png" />
+<img src="../../../src/assets/logo-2.png" style="height:220px;"/>
 
 <lay-block>
-layui（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库 , Layui 的 另 一 种 呈 现 方 式
+layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库 , Layui 的 另 一 种 呈 现 方 式
 </lay-block>
 
 <lay-timeline style="padding-left:38px;padding-top:30px;">
diff --git a/docs/src/assets/logo-3.svg b/docs/src/assets/logo-3.svg
new file mode 100644
index 00000000..600cc902
--- /dev/null
+++ b/docs/src/assets/logo-3.svg
@@ -0,0 +1 @@
+<svg id="b6a0220b-322a-435e-9212-1568a8115194" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="888" height="475.27072" viewBox="0 0 888 475.27072"><title>true_love</title><rect x="402.54442" y="219.17275" width="2.57298" height="13.89411" transform="translate(-11.71503 -369.44906) rotate(26.64397)" fill="#fff"/><path d="M426.98456,248.842a66.00006,66.00006,0,0,0-93.33814,0l-.01788.01788a65.982,65.982,0,0,0-93.30231,93.30237l-.01788.01788,93.33807,93.33807,93.33814-93.33807A66,66,0,0,0,426.98456,248.842Z" transform="translate(-156 -212.36464)" fill="#ff6584"/><path d="M709.42956,621.81706h-489.679a9.98831,9.98831,0,0,1-1.82989-.145l231.59565-401.157a16.2157,16.2157,0,0,1,28.22705,0L633.17308,489.72253l7.44637,12.8816Z" transform="translate(-156 -212.36464)" fill="#5fb878"/><polygon points="553.43 409.452 386.241 409.452 468.314 290.239 474.22 281.652 477.173 277.358 484.619 290.239 553.43 409.452" opacity="0.2"/><path d="M982.07935,621.36464H558.54722l82.07223-119.21293,5.9062-8.58777L753.47313,338.20663c7.01145-10.182,23.87881-10.81607,32.12223-1.92044a19.328,19.328,0,0,1,1.54006,1.92044Z" transform="translate(-156 -212.36464)" fill="#3f3d56"/><rect y="407.93322" width="888" height="2.24072" fill="#3f3d56"/><ellipse cx="570.05705" cy="586.26729" rx="32.34192" ry="10.15313" transform="translate(-329.28848 33.15083) rotate(-21.1763)" fill="#2f2e41"/><circle cx="349.2698" cy="382.74826" r="64.68385" fill="#2f2e41"/><rect x="319.79361" y="433.51279" width="19.65079" height="35.20766" fill="#2f2e41"/><rect x="359.09519" y="433.51279" width="19.65079" height="35.20766" fill="#2f2e41"/><ellipse cx="336.16927" cy="469.12985" rx="16.37566" ry="6.14087" fill="#2f2e41"/><ellipse cx="375.47085" cy="468.31107" rx="16.37566" ry="6.14087" fill="#2f2e41"/><circle cx="350.90736" cy="366.3726" r="22.10714" fill="#fff"/><circle cx="350.90736" cy="366.3726" r="7.36905" fill="#3f3d56"/><path d="M442.52428,534.95878c-5.22292-23.39065,11.47266-47.02591,37.29064-52.79083s50.9816,8.52354,56.20452,31.91418-11.88759,32.01752-37.70556,37.78245S447.74721,558.34942,442.52428,534.95878Z" transform="translate(-156 -212.36464)" fill="#e6e6e6"/><ellipse cx="440.41422" cy="603.0993" rx="32.34192" ry="10.15313" transform="translate(-453.46127 275.69894) rotate(-45)" fill="#2f2e41"/><path d="M473.49729,618.44821c0,6.33082,16.30083,18.832,34.38888,18.832s35.04764-17.82327,35.04764-24.15409-16.95958,1.22817-35.04764,1.22817S473.49729,612.11739,473.49729,618.44821Z" transform="translate(-156 -212.36464)" fill="#fff"/><ellipse cx="623.94295" cy="586.26729" rx="10.15313" ry="32.34192" transform="translate(-304.12811 743.93025) rotate(-68.8237)" fill="#2f2e41"/><circle cx="532.7302" cy="382.74826" r="64.68385" fill="#2f2e41"/><rect x="698.5556" y="645.87743" width="19.65079" height="35.20766" transform="translate(1260.76198 1114.59789) rotate(-180)" fill="#2f2e41"/><rect x="659.25402" y="645.87743" width="19.65079" height="35.20766" transform="translate(1182.15883 1114.59789) rotate(-180)" fill="#2f2e41"/><ellipse cx="545.83073" cy="469.12985" rx="16.37566" ry="6.14087" fill="#2f2e41"/><ellipse cx="506.52915" cy="468.31107" rx="16.37566" ry="6.14087" fill="#2f2e41"/><circle cx="531.09264" cy="366.3726" r="22.10714" fill="#fff"/><circle cx="531.09264" cy="366.3726" r="7.36905" fill="#3f3d56"/><path d="M751.47572,534.95878c5.22292-23.39065-11.47266-47.02591-37.29064-52.79083s-50.9816,8.52354-56.20452,31.91418,11.88759,32.01752,37.70556,37.78245S746.25279,558.34942,751.47572,534.95878Z" transform="translate(-156 -212.36464)" fill="#5fb878"/><ellipse cx="753.58578" cy="603.0993" rx="10.15313" ry="32.34192" transform="translate(-361.73544 497.14467) rotate(-45)" fill="#2f2e41"/><path d="M720.50271,618.44821c0,6.33082-16.30083,18.832-34.38888,18.832s-35.04764-17.82327-35.04764-24.15409,16.95958,1.22817,35.04764,1.22817S720.50271,612.11739,720.50271,618.44821Z" transform="translate(-156 -212.36464)" fill="#fff"/><path d="M1044,527.22724c0,41.80115-24.85012,56.39655-55.5043,56.39655s-55.5043-14.5954-55.5043-56.39655,55.5043-94.97881,55.5043-94.97881S1044,485.42608,1044,527.22724Z" transform="translate(-156 -212.36464)" fill="#e6e6e6"/><polygon points="830.474 364.865 831.042 329.881 854.699 286.601 831.131 324.393 831.387 308.663 847.691 277.35 831.454 304.5 831.454 304.5 831.914 276.209 849.373 251.28 831.986 271.76 832.273 219.884 830.469 288.559 830.617 285.726 812.866 258.555 830.332 291.164 828.678 322.761 828.629 321.922 808.166 293.329 828.567 324.885 828.36 328.836 828.323 328.896 828.34 329.22 824.144 409.383 829.751 409.383 830.423 367.977 850.775 336.499 830.474 364.865" fill="#3f3d56"/></svg>
\ No newline at end of file
diff --git a/src/module/menu/index.vue b/src/module/menu/index.vue
index d0565a02..58b75e76 100644
--- a/src/module/menu/index.vue
+++ b/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>
diff --git a/src/module/menuChildItem/index.vue b/src/module/menuChildItem/index.vue
index ac2cf623..755cb790 100644
--- a/src/module/menuChildItem/index.vue
+++ b/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>
diff --git a/src/module/menuItem/index.vue b/src/module/menuItem/index.vue
index ef2c2cb3..2212ca51 100644
--- a/src/module/menuItem/index.vue
+++ b/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>