From c8b0457339228f31d378cf4755db80734bc8af43 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=B1=E7=9C=A0=E5=84=80=E5=BC=8F?= <854085467@qq.com>
Date: Sun, 27 Feb 2022 12:55:09 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=20menu=20=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=20collapse=20=E5=B1=9E=E6=80=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 example/docs/zh-CN/components/menu.md       | 252 +++++++++++++++-----
 example/docs/zh-CN/guide/getStarted.md      |  12 +-
 example/docs/zh-CN/guide/introduce.md       |   2 +-
 example/src/view/index.vue                  |  27 ++-
 example/src/view/material.vue               |   1 -
 src/component/button/index.less             |   4 +-
 src/component/button/index.vue              |   2 +-
 src/component/formItem/cnValidateMessage.ts |   2 +-
 src/component/menu/index.less               |   3 -
 src/component/menu/index.vue                |  22 +-
 src/component/menuItem/index.vue            |  11 +-
 src/component/subMenu/index.vue             |  19 +-
 src/theme/index.less                        |   2 +-
 13 files changed, 260 insertions(+), 99 deletions(-)

diff --git a/example/docs/zh-CN/components/menu.md b/example/docs/zh-CN/components/menu.md
index 4b28ba70..fcbe8aff 100644
--- a/example/docs/zh-CN/components/menu.md
+++ b/example/docs/zh-CN/components/menu.md
@@ -14,20 +14,22 @@
 
 <template>
   <lay-menu v-model:selectedKey="selectedKey" v-model:openKeys="openKeys1">
-    <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-sub-menu title="目录" id="7">
-        <lay-menu-item title="菜单1" id="8"></lay-menu-item> 
-        <lay-menu-item title="菜单2" id="9"></lay-menu-item>
-        <lay-sub-menu title="菜单3" id="10">
-            <lay-menu-item title="菜单3-1" id="11"></lay-menu-item> 
-            <lay-menu-item title="菜单3-2" id="12"></lay-menu-item>
-            <lay-sub-menu title="菜单3-3" id="13">
-              <lay-menu-item title="菜单3-3-1" id="14"></lay-menu-item> 
-              <lay-menu-item title="菜单3-3-2" id="15"></lay-menu-item>
-              <lay-menu-item title="菜单3-3-3" id="16"></lay-menu-item>
-          </lay-sub-menu>
+    <lay-menu-item id="1">首页</lay-menu-item>
+    <lay-menu-item id="2">首页</lay-menu-item>
+    <lay-menu-item id="3">首页</lay-menu-item> 
+    <lay-sub-menu id="7">
+        <template #title>
+          首页
+        </template>
+        <lay-menu-item id="8">首页</lay-menu-item> 
+        <lay-menu-item id="9">首页</lay-menu-item>
+        <lay-sub-menu title="菜单" id="10">
+            <template #title>
+              首页
+            </template>
+            <lay-menu-item id="11">首页</lay-menu-item> 
+            <lay-menu-item id="12">首页</lay-menu-item>
+            <lay-menu-item id="13">首页</lay-menu-item>
         </lay-sub-menu>
     </lay-sub-menu> 
   </lay-menu>
@@ -58,16 +60,22 @@ export default {
 
 <template>
   <lay-menu v-model:selectedKey="selectedKey" v-model:openKeys="openKeys2" :tree="true">
-    <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-sub-menu title="目录" id="7">
-        <lay-menu-item title="菜单" id="8"></lay-menu-item> 
-        <lay-menu-item title="菜单" id="9"></lay-menu-item>
+    <lay-menu-item id="1">首页</lay-menu-item>
+    <lay-menu-item id="2">首页</lay-menu-item>
+    <lay-menu-item id="3">首页</lay-menu-item> 
+    <lay-sub-menu id="7">
+        <template #title>
+          首页
+        </template>
+        <lay-menu-item id="8">首页</lay-menu-item> 
+        <lay-menu-item id="9">首页</lay-menu-item>
         <lay-sub-menu title="菜单" id="10">
-            <lay-menu-item title="菜单" id="11"></lay-menu-item> 
-            <lay-menu-item title="菜单" id="12"></lay-menu-item>
-            <lay-menu-item title="菜单" id="13"></lay-menu-item>
+            <template #title>
+              首页
+            </template>
+            <lay-menu-item id="11">首页</lay-menu-item> 
+            <lay-menu-item id="12">首页</lay-menu-item>
+            <lay-menu-item id="13">首页</lay-menu-item>
         </lay-sub-menu>
     </lay-sub-menu> 
   </lay-menu>
@@ -99,16 +107,22 @@ export default {
 
 <template>
   <lay-menu level="true" v-model:selectedKey="selectedKey" inverted="true" v-model:openKeys="openKeys3" :tree="true">
-    <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-sub-menu title="目录" id="7">
-        <lay-menu-item title="菜单" id="8"></lay-menu-item> 
-        <lay-menu-item title="菜单" id="9"></lay-menu-item>
-        <lay-sub-menu title="菜单" id="10">
-            <lay-menu-item title="菜单" id="11"></lay-menu-item> 
-            <lay-menu-item title="菜单" id="12"></lay-menu-item>
-            <lay-menu-item title="菜单" id="13"></lay-menu-item>
+    <lay-menu-item id="1">首页</lay-menu-item>
+    <lay-menu-item id="2">首页</lay-menu-item>
+    <lay-menu-item id="3">首页</lay-menu-item> 
+    <lay-sub-menu id="7">
+        <template #title>
+          首页
+        </template>
+        <lay-menu-item id="8">首页</lay-menu-item> 
+        <lay-menu-item id="9">首页</lay-menu-item>
+        <lay-sub-menu id="10">
+            <template #title>
+              首页
+            </template>
+            <lay-menu-item id="11">首页</lay-menu-item> 
+            <lay-menu-item id="12">首页</lay-menu-item>
+            <lay-menu-item id="13">首页</lay-menu-item>
         </lay-sub-menu>
     </lay-sub-menu> 
   </lay-menu>
@@ -140,16 +154,44 @@ export default {
 
 <template>
   <lay-menu v-model:selectedKey="selectedKey" theme="light" v-model:openKeys="openKeys4" :tree="true">
-    <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-sub-menu title="目录" id="7">
-        <lay-menu-item title="菜单" id="8"></lay-menu-item> 
-        <lay-menu-item title="菜单" id="9"></lay-menu-item>
+    <lay-menu-item id="1">
+      <template #title>
+        菜单
+      </template>
+    </lay-menu-item>
+    <lay-menu-item id="2">
+      <template #title>
+        菜单
+      </template>
+    </lay-menu-item>
+    <lay-menu-item id="3">
+      <template #title>
+        菜单
+      </template>
+    </lay-menu-item> 
+    <lay-sub-menu id="7">
+        <template #title>
+          目录
+        </template>
+        <lay-menu-item id="8">
+          菜单
+        </lay-menu-item> 
+        <lay-menu-item id="9">
+          菜单
+        </lay-menu-item>
         <lay-sub-menu title="菜单" id="10">
-            <lay-menu-item title="菜单" id="11"></lay-menu-item> 
-            <lay-menu-item title="菜单" id="12"></lay-menu-item>
-            <lay-menu-item title="菜单" id="13"></lay-menu-item>
+            <template #title>
+              目录
+            </template>
+            <lay-menu-item id="11">
+              菜单
+            </lay-menu-item> 
+            <lay-menu-item id="12">
+              菜单
+            </lay-menu-item>
+            <lay-menu-item id="13">
+              菜单
+            </lay-menu-item>
         </lay-sub-menu>
     </lay-sub-menu> 
   </lay-menu>
@@ -241,19 +283,107 @@ export default {
   <br/>
   <br/>
   <lay-menu v-model:selectedKey="selectedKey" v-model:tree="isTree" v-model:openKeys="openKeys6" :collapse="collapse">
-    <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 id="1">
+        <template #icon>
+          <lay-icon type="layui-icon-home"></lay-icon> 
+        </template>
+        <template #title>
+          首页
+        </template>
+    </lay-menu-item>
+    <lay-menu-item id="2">
+        <template #icon>
+          <lay-icon type="layui-icon-home"></lay-icon> 
+        </template>
+        <template #title>
+          首页
+        </template>
+    </lay-menu-item>
+    <lay-menu-item id="3">
+        <template #icon>
+          <lay-icon type="layui-icon-home"></lay-icon> 
+        </template>
+        <template #title>
+          首页
+        </template>
+    </lay-menu-item> 
     <lay-sub-menu title="目录" id="7">
-        <lay-menu-item title="菜单1" id="8"></lay-menu-item> 
-        <lay-menu-item title="菜单2" id="9"></lay-menu-item>
-        <lay-sub-menu title="菜单3" id="10">
-            <lay-menu-item title="菜单3-1" id="11"></lay-menu-item> 
-            <lay-menu-item title="菜单3-2" id="12"></lay-menu-item>
-            <lay-sub-menu title="菜单3-3" id="13">
-              <lay-menu-item title="菜单3-3-1" id="14"></lay-menu-item> 
-              <lay-menu-item title="菜单3-3-2" id="15"></lay-menu-item>
-              <lay-menu-item title="菜单3-3-3" id="16"></lay-menu-item>
+        <template #icon>
+          <lay-icon type="layui-icon-home"></lay-icon> 
+        </template>
+        <template #title>
+          首页
+        </template>
+        <lay-menu-item id="8">
+                  <template #icon>
+          <lay-icon type="layui-icon-home"></lay-icon> 
+        </template>
+        <template #title>
+          首页
+        </template>
+        </lay-menu-item> 
+        <lay-menu-item id="9">
+                  <template #icon>
+          <lay-icon type="layui-icon-home"></lay-icon> 
+        </template>
+        <template #title>
+          首页
+        </template>
+        </lay-menu-item>
+        <lay-sub-menu id="10">
+            <template #icon>
+              <lay-icon type="layui-icon-home"></lay-icon> 
+            </template>
+            <template #title>
+              首页
+            </template>
+            <lay-menu-item id="11">
+                      <template #icon>
+          <lay-icon type="layui-icon-home"></lay-icon> 
+        </template>
+        <template #title>
+          首页
+        </template>
+            </lay-menu-item> 
+            <lay-menu-item id="12">
+                      <template #icon>
+          <lay-icon type="layui-icon-home"></lay-icon> 
+        </template>
+        <template #title>
+          首页
+        </template>
+            </lay-menu-item>
+            <lay-sub-menu id="13">
+              <template #icon>
+                <lay-icon type="layui-icon-home"></lay-icon> 
+              </template>
+              <template #title>
+              首页
+              </template>
+              <lay-menu-item id="14">
+                        <template #icon>
+          <lay-icon type="layui-icon-home"></lay-icon> 
+        </template>
+        <template #title>
+          首页
+        </template>
+              </lay-menu-item> 
+              <lay-menu-item id="15">
+                        <template #icon>
+          <lay-icon type="layui-icon-home"></lay-icon> 
+        </template>
+        <template #title>
+          首页
+        </template>
+              </lay-menu-item>
+              <lay-menu-item id="16">
+                        <template #icon>
+          <lay-icon type="layui-icon-home"></lay-icon> 
+        </template>
+        <template #title>
+          首页
+        </template>
+              </lay-menu-item>
           </lay-sub-menu>
         </lay-sub-menu>
     </lay-sub-menu> 
@@ -287,13 +417,13 @@ export default {
 
 ::: table
 
-| 属性                | 描述   | 备注 |
-| ------------------- | ------ | ---- |
-| v-model:selectedKey | 选中项 | --   |
-| v-model:openKeys    | 打开项 | --   |
-| theme    | 菜单主题 | `dark` `light`   |
-| inverted    | 特殊的激活样式 | `true` `false`  |
-| level    | 菜单层级 | `true` `false`  |
+| 属性                | 描述           | 备注           |
+| ------------------- | -------------- | -------------- |
+| v-model:selectedKey | 选中项         | --             |
+| v-model:openKeys    | 打开项         | --             |
+| theme               | 菜单主题       | `dark` `light` |
+| inverted            | 特殊的激活样式 | `true` `false` |
+| level               | 菜单层级       | `true` `false` |
 
 :::
 
diff --git a/example/docs/zh-CN/guide/getStarted.md b/example/docs/zh-CN/guide/getStarted.md
index 4fdff3c3..1fa791b9 100644
--- a/example/docs/zh-CN/guide/getStarted.md
+++ b/example/docs/zh-CN/guide/getStarted.md
@@ -5,21 +5,21 @@
 
 <p>
   <a href="http://layui-vue.pearadmin.com" style="margin-left:30px;">
-    <img src="https://portrait.gitee.com/uploads/avatars/namespace/2868/8605626_layui_1634311144.png" alt="layui" width="110" style="border-radius:12px;">
+    <img src="https://portrait.gitee.com/uploads/avatars/namespace/2868/8605626_layui_1634311144.png" alt="layui" width="105" style="border-radius:12px;">
   </a>
-  <span style="font-size:30px;color:#e2e2e2;margin:30px;">+</span>
+  <span style="font-size:32px;color:#e2e2e2;margin:30px;">+</span>
   <a href="http://layui-vue.pearadmin.com">
-    <img src="https://qn.antdv.com/vue.png" alt="layui" width="110" style="border-radius:12px;">
+    <img src="https://qn.antdv.com/vue.png" alt="layui" width="105" style="border-radius:12px;">
   </a>
-  <span style="font-size:30px;color:#e2e2e2;margin:30px;">=</span>
+  <span style="font-size:32px;color:#e2e2e2;margin:30px;">=</span>
   <a href="http://layui-vue.pearadmin.com">
-    <img src="../../../src/assets/logo.jpg" alt="layui" width="110" style="border-radius:12px;">
+    <img src="../../../src/assets/logo.jpg" alt="layui" width="105" style="border-radius:12px;">
   </a>
 </p>
 
 <br>
 
-::: describe 使用 (npm, yarn, pnpm) 工具安装 layui vue, 然后你就可以使用打包工具, 如 vite
+::: describe 使用 npm 工具安装 layui vue, 然后你就可以使用打包工具, 如 vite rollup.
 :::
 
 ```
diff --git a/example/docs/zh-CN/guide/introduce.md b/example/docs/zh-CN/guide/introduce.md
index 172208a0..68ea8def 100644
--- a/example/docs/zh-CN/guide/introduce.md
+++ b/example/docs/zh-CN/guide/introduce.md
@@ -3,7 +3,7 @@
 
 <p>
   <a href="http://layui-vue.pearadmin.com">
-    <img src="../../../src/assets/logo-new.png" alt="layui" width="400">
+    <img src="../../../src/assets/logo-new.png" alt="layui" width="440">
   </a>
 </p>
 
diff --git a/example/src/view/index.vue b/example/src/view/index.vue
index 60f1f1b4..eca93cb3 100644
--- a/example/src/view/index.vue
+++ b/example/src/view/index.vue
@@ -1,20 +1,20 @@
 <template>
-  <div
-    style="
-      margin-top: 60px;
-      background-color: whitesmoke;
-      height: 100%;
-      width: 100%;
-    "
+  <div class="site-container"
   >
     <div class="site-banner">
       <div class="site-banner-main">
         <div class="site-zfj site-zfj-anim">
-          <img src="../assets/logo.jpg" style="width: 200px;border-radius: 10px;box-shadow: 2px 0 6px rgb(0 21 41 / 35%);" />
+          <img
+            src="../assets/logo.jpg"
+            style="width: 220px; border-radius: 10px"
+          />
         </div>
         <div class="layui-anim site-desc site-desc-anim">
           <p class="web-font-desc">layui - vue</p>
-          <cite>layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库.</cite>
+          <cite
+            >layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件
+            库.</cite
+          >
         </div>
         <div class="site-download">
           <router-link class="layui-inline site-down" to="/zh-CN/guide"
@@ -109,15 +109,18 @@
   </div>
 </template>
 <style>
+.site-container {
+  margin-top: 60px;
+  background-color: whitesmoke;
+  height: 100%;
+  width: 100%;
+}
 .site-banner {
   position: relative;
   height: 600px;
   text-align: center;
   overflow: hidden;
   background-color: #393d49;
-  background-image: url(../assets/background.svg);
-  background-repeat: no-repeat;
-  background-size: 100%;
 }
 .site-banner-bg {
   background-position: center 0;
diff --git a/example/src/view/material.vue b/example/src/view/material.vue
index ade203fb..92a24de8 100644
--- a/example/src/view/material.vue
+++ b/example/src/view/material.vue
@@ -59,7 +59,6 @@
   height: 190px;
   text-align: center;
   font-weight: 300;
-  background-color: #009688;
   color: #fff;
 }
 .alone-banner h1 {
diff --git a/src/component/button/index.less b/src/component/button/index.less
index f0b72c67..311428ec 100644
--- a/src/component/button/index.less
+++ b/src/component/button/index.less
@@ -56,7 +56,7 @@
 }
 
 .layui-btn-primary {
-  border-color: @global-neutral-color-3;
+  border-color: @button-border-color;
   background: 0 0;
   color: #666;
 }
@@ -113,4 +113,4 @@
   color: #d2d2d2 !important;
   cursor: not-allowed !important;
   opacity: 1;
-}
+}
\ No newline at end of file
diff --git a/src/component/button/index.vue b/src/component/button/index.vue
index 31faca80..3f027531 100644
--- a/src/component/button/index.vue
+++ b/src/component/button/index.vue
@@ -67,4 +67,4 @@ const classes = computed(() => {
     ></i>
     <slot v-else></slot>
   </button>
-</template>
+</template>
\ No newline at end of file
diff --git a/src/component/formItem/cnValidateMessage.ts b/src/component/formItem/cnValidateMessage.ts
index 1313ce0a..6a0b2ad3 100644
--- a/src/component/formItem/cnValidateMessage.ts
+++ b/src/component/formItem/cnValidateMessage.ts
@@ -29,7 +29,7 @@ export default {
     len: "%s必须是长度为%s个字符",
     min: "%s最小长度为%s个字符",
     max: "%s最长%s个字符",
-    range: "%s字符长度需要在%s和%s直接",
+    range: "%s字符长度需要在%s和%s之间",
   },
   number: {
     len: "%s长度必须为%s",
diff --git a/src/component/menu/index.less b/src/component/menu/index.less
index 0e61832c..30ca7e33 100644
--- a/src/component/menu/index.less
+++ b/src/component/menu/index.less
@@ -159,7 +159,6 @@
   text-align: center;
 }
 
-//
 .layui-nav.layui-nav-collapse {
   width: 60px;
   span {
@@ -170,8 +169,6 @@
   }
 }
 
-
-
 .layui-nav-tree {
   width: 200px;
   padding: 0;
diff --git a/src/component/menu/index.vue b/src/component/menu/index.vue
index 3f95d0dd..a950bc8d 100644
--- a/src/component/menu/index.vue
+++ b/src/component/menu/index.vue
@@ -5,7 +5,7 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { computed, provide } from "vue";
+import { computed, provide, ref, watch } from "vue";
 import "./index.less";
 
 export interface LayMenuProps {
@@ -30,14 +30,17 @@ const props = withDefaults(defineProps<LayMenuProps>(), {
   collapse: false,
 });
 
+let oldOpenKeys = ref<string[]>([]);
+
 const isTree = computed(() => props.tree);
+const isCollapse = computed(() => props.collapse);
 
 const openKeys = computed({
   get() {
     return props.openKeys;
   },
   set(val) {
-    emit("update:selectedKey", val);
+    emit("update:openKeys", val);
   },
 });
 
@@ -50,9 +53,24 @@ const selectedKey = computed({
   },
 });
 
+watch(
+  () => props.collapse,
+  () => {
+    if (props.collapse) {
+      // 删除所有打开
+      oldOpenKeys.value = props.openKeys;
+      emit("update:openKeys", []);
+    } else {
+      // 赋值所有打开
+      emit("update:openKeys", oldOpenKeys.value);
+    }
+  }, { immediate: true}
+);
+
 provide("isTree", isTree);
 provide("selectedKey", selectedKey);
 provide("openKeys", openKeys);
+provide("isCollapse", isCollapse);
 </script>
 
 <template>
diff --git a/src/component/menuItem/index.vue b/src/component/menuItem/index.vue
index 99f777d7..a29b979e 100644
--- a/src/component/menuItem/index.vue
+++ b/src/component/menuItem/index.vue
@@ -27,8 +27,15 @@ const selectHandle = function () {
     @click="selectHandle()"
   >
     <a href="javascript:void(0)">
-      <slot v-if="slots.default"></slot>
-      <span v-else>{{ title }}</span>
+      <i v-if="slots.icon">
+        <slot name="icon"></slot>
+      </i>
+      <span v-if="slots.title">
+        <slot name="title"></slot>
+      </span>
+      <span v-else>
+        <slot></slot>
+      </span>
     </a>
   </li>
 </template>
diff --git a/src/component/subMenu/index.vue b/src/component/subMenu/index.vue
index e20dda83..5d91a1a9 100644
--- a/src/component/subMenu/index.vue
+++ b/src/component/subMenu/index.vue
@@ -28,6 +28,7 @@ const props = defineProps<LaySubMenuProps>();
 const isTree: Ref<boolean> = inject("isTree") as Ref<boolean>;
 const selectedKey: Ref<string> = inject("selectedKey") as Ref<string>;
 const openKeys: Ref<string[]> = inject("openKeys") as Ref<string[]>;
+const isCollapse: Ref<boolean> = inject("isCollapse") as Ref<boolean>;
 
 const isOpen = computed(() => {
   return openKeys.value.includes(props.id);
@@ -43,10 +44,12 @@ watch(isOpen, () => {
 });
 
 const openHandle = function () {
-  if (openKeys.value.includes(props.id)) {
-    openKeys.value.splice(openKeys.value.indexOf(props.id), 1);
-  } else {
-    openKeys.value.push(props.id);
+  if (!isCollapse.value) {
+    if (openKeys.value.includes(props.id)) {
+      openKeys.value.splice(openKeys.value.indexOf(props.id), 1);
+    } else {
+      openKeys.value.push(props.id);
+    }
   }
 };
 
@@ -84,8 +87,12 @@ onBeforeUnmount(() => window.removeEventListener("resize", setPosition));
     :class="[isOpen && isTree ? 'layui-nav-itemed' : '']"
   >
     <a href="javascript:void(0)" @click="openHandle()">
-      <slot v-if="slots.title" name="title"></slot>
-      <span v-else>{{ title }}</span>
+      <i>
+        <slot v-if="slots.icon" name="icon"></slot>
+      </i>
+      <span>
+        <slot v-if="slots.title" name="title"></slot>
+      </span>
       <i
         :class="[isOpen && !isTree ? 'layui-nav-mored' : '']"
         class="layui-icon layui-icon-down layui-nav-more"
diff --git a/src/theme/index.less b/src/theme/index.less
index aec1541d..4a9fac95 100644
--- a/src/theme/index.less
+++ b/src/theme/index.less
@@ -3492,4 +3492,4 @@ body .layui-util-face .layui-layer-content {
 .layui-anim-fadeout {
   -webkit-animation-name: layui-fadeout;
   animation-name: layui-fadeout;
-}
+}
\ No newline at end of file