From afda4aa077b6743287de758c741fce5c585ef2f7 Mon Sep 17 00:00:00 2001
From: sight <1453017105@qq.com>
Date: Fri, 1 Jul 2022 18:03:42 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B(component):=20[popup-menu]?=
 =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E6=82=AC=E6=B5=AE=E8=8F=9C=E5=8D=95=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/component/menuItem/index.vue          |   2 +-
 .../src/component/subMenu/SubMenuPopup.vue    | 131 +++++++-------
 .../component/src/component/subMenu/index.vue |  12 +-
 .../src/document/zh-CN/components/menu.md     | 162 ++++++++++++++++++
 4 files changed, 229 insertions(+), 78 deletions(-)

diff --git a/package/component/src/component/menuItem/index.vue b/package/component/src/component/menuItem/index.vue
index cf14a0f5..8755a193 100644
--- a/package/component/src/component/menuItem/index.vue
+++ b/package/component/src/component/menuItem/index.vue
@@ -54,7 +54,7 @@ const needTooltip = computed(
 
     <template v-else>
       <a href="javascript:void(0)">
-        <i v-if="slots.icon">
+        <i v-if="slots.icon" class="layui-sub-menu-icon">
           <slot name="icon"></slot>
         </i>
         <span v-if="slots.title">
diff --git a/package/component/src/component/subMenu/SubMenuPopup.vue b/package/component/src/component/subMenu/SubMenuPopup.vue
index 30847b4c..71bb4cac 100644
--- a/package/component/src/component/subMenu/SubMenuPopup.vue
+++ b/package/component/src/component/subMenu/SubMenuPopup.vue
@@ -12,8 +12,6 @@ export interface LaySubMenuPopupProps {
   id: string;
   title?: string;
 }
-
-const slots = useSlots();
 const props = defineProps<LaySubMenuPopupProps>();
 
 const openKeys: Ref<string[]> = inject("openKeys") as Ref<string[]>;
@@ -25,87 +23,78 @@ const isOpen = computed(() => {
 </script>
 
 <template>
-  <li :class="['layui-nav-item sub-menu-popup', level > 2 ? 'original' : '']">
-    <lay-dropdown
-      trigger="hover"
-      placement="right-top"
-      :autoFitMinWidth="false"
-      :contentOffset="3"
-    >
-      <a href="javascript:void(0)">
-        <!-- 图标 -->
-        <i>
-          <slot v-if="slots.icon" name="icon"></slot>
-        </i>
-        <!-- 标题 -->
-        <span>
-          <slot v-if="slots.title" name="title"></slot>
-        </span>
+  <lay-dropdown
+    trigger="hover"
+    placement="right-top"
+    :autoFitMinWidth="false"
+    :contentOffset="3"
+    class="layui-sub-menu-popup"
+  >
+    <li :class="['layui-nav-item']">
+      <a href="javascript:void(0)" style="justify-content: space-between">
+        <div>
+          <!-- 图标 -->
+          <i v-if="$slots.icon" class="layui-sub-menu-icon">
+            <slot name="icon"></slot>
+          </i>
+
+          <!-- 标题 -->
+          <span v-if="$slots.title">
+            <slot name="title"></slot>
+          </span>
+        </div>
+
         <!-- 扩展 -->
-        <i v-if="slots.expandIcon" class="layui-nav-more">
+        <span v-if="$slots.expandIcon" class="layui-nav-more">
           <slot name="expandIcon">
             <lay-icon type="layui-icon-right"></lay-icon>
           </slot>
-        </i>
+        </span>
       </a>
-      <template #content>
-        <slot></slot>
-      </template>
-    </lay-dropdown>
-  </li>
+    </li>
+    <template #content class="layui-sub-menu-popup-content">
+      <slot></slot>
+    </template>
+  </lay-dropdown>
 </template>
 <style lang="less">
-.sub-menu-popup {
-  line-height: inherit;
-}
-
-.sub-menu-popup > .layui-dropdown > div > a {
-  width: auto;
-  display: block;
-  text-overflow: clip;
-  height: 40px;
-  line-height: 40px;
-  position: relative;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  white-space: nowrap;
-  padding: 5px 23px 5px 23px;
-}
-
-.sub-menu-popup > .layui-dropdown dl {
-  border-radius: 4px;
+// popup-menu 面板样式
+.layui-sub-menu-popup.layui-dropdown > dl {
+  border: unset;
+  border-radius: 2px;
   background-color: #393d49;
 }
+// popup-menu item样式
+.layui-nav.layui-nav-collapse {
+  .layui-sub-menu-popup dl .layui-nav-item {
+    width: auto;
+    > a {
+      display: flex;
+      align-items: center;
+      text-overflow: ellipsis;
+      padding: 5px 20px 5px 20px;
+      // height: 35px;
+      // width: 95px;
 
-.sub-menu-popup > .layui-dropdown dl > li > a {
-  span {
-    display: inline;
-  }
+      .layui-sub-menu-icon {
+        margin-right: 8px;
+      }
+    }
 
-  .layui-nav-item > a {
-    text-overflow: clip;
-  }
+    span {
+      display: inline-block;
+      margin-left: 0;
+    }
 
-  .layui-nav-more {
-    display: inline-block;
-  }
-}
-
-.layui-nav.layui-nav-collapse .sub-menu-popup.original {
-  width: 100%;
-
-  span {
-    display: inline;
-  }
-
-  .layui-nav-item > a {
-    text-overflow: clip;
-  }
-
-  .layui-nav-more {
-    display: inline-block;
-    right: 2px;
-    top: 5.5px;
+    .layui-nav-more {
+      position: relative;
+      display: inline-block;
+      font-size: 12.5px !important;
+      margin-top: 0;
+      margin-left: 30px;
+      padding: 0;
+      right: -8px;
+    }
   }
 }
 </style>
diff --git a/package/component/src/component/subMenu/index.vue b/package/component/src/component/subMenu/index.vue
index bf27ef51..9a67649d 100644
--- a/package/component/src/component/subMenu/index.vue
+++ b/package/component/src/component/subMenu/index.vue
@@ -104,8 +104,8 @@ onBeforeUnmount(() => window.removeEventListener("resize", setPosition));
     <li class="layui-nav-item">
       <a href="javascript:void(0)" @click="openHandle()">
         <!-- 图标 -->
-        <i>
-          <slot v-if="slots.icon" name="icon"></slot>
+        <i v-if="slots.icon" class="layui-sub-menu-icon">
+          <slot name="icon"></slot>
         </i>
         <!-- 标题 -->
         <span>
@@ -146,11 +146,11 @@ onBeforeUnmount(() => window.removeEventListener("resize", setPosition));
   </template>
   <template v-else>
     <SubMenuPopup :id="id">
-      <template #icon>
-        <slot v-if="slots.icon" name="icon"></slot>
+      <template v-if="slots.icon" #icon>
+        <slot name="icon"></slot>
       </template>
-      <template #title>
-        <slot v-if="slots.title" name="title"></slot>
+      <template v-if="slots.title" #title>
+        <slot name="title"></slot>
       </template>
       <template #expandIcon>
         <slot v-if="slots.expandIcon" name="expandIcon"></slot>
diff --git a/package/document-component/src/document/zh-CN/components/menu.md b/package/document-component/src/document/zh-CN/components/menu.md
index 8610cec8..4a92bd0e 100644
--- a/package/document-component/src/document/zh-CN/components/menu.md
+++ b/package/document-component/src/document/zh-CN/components/menu.md
@@ -423,6 +423,168 @@ export default {
 
 :::
 
+::: title 悬浮菜单
+:::
+
+::: demo
+
+<template>
+  <lay-switch v-model="collapse20"></lay-switch>
+  <br/>
+  <br/>
+  <lay-menu v-model:selectedKey="selectedKey20" v-model:tree="isTree20" v-model:openKeys="openKeys20" :collapse="collapse20">
+    <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-sub-menu title="目录" id="3">
+      <template #icon><lay-icon type="layui-icon-home"></lay-icon></template>
+      <template #title>首页</template>
+      <lay-menu-item id="4">
+        <template #title>首页</template>
+      </lay-menu-item> 
+      <lay-menu-item id="5">
+        <template #title>菜单一</template>
+      </lay-menu-item>
+      <lay-sub-menu id="6">
+        <template #title>首页</template>
+        <lay-menu-item id="7">
+          <template #title>首页</template>
+        </lay-menu-item> 
+        <lay-menu-item id="8">
+          <template #title>首页</template>
+        </lay-menu-item>
+        <lay-sub-menu id="9">
+          <template #title>首页</template>
+          <lay-menu-item id="10">
+            <template #title>首页</template>
+          </lay-menu-item> 
+          <lay-menu-item id="11">
+            <template #title>首页</template>
+          </lay-menu-item>
+          <lay-menu-item id="12">
+            <template #title>首页</template>
+          </lay-menu-item>
+        </lay-sub-menu>
+      </lay-sub-menu>
+    </lay-sub-menu>  
+    <lay-sub-menu title="目录" 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-sub-menu id="16">
+            <template #icon>
+              <lay-icon type="layui-icon-home"></lay-icon> 
+            </template>
+            <template #title>
+              首页
+            </template>
+            <lay-menu-item id="17">
+                      <template #icon>
+          <lay-icon type="layui-icon-home"></lay-icon> 
+        </template>
+        <template #title>
+          首页
+        </template>
+            </lay-menu-item> 
+            <lay-menu-item id="18">
+                      <template #icon>
+          <lay-icon type="layui-icon-home"></lay-icon> 
+        </template>
+        <template #title>
+          首页
+        </template>
+            </lay-menu-item>
+            <lay-sub-menu id="19">
+              <template #icon>
+                <lay-icon type="layui-icon-home"></lay-icon> 
+              </template>
+              <template #title>
+              首页
+              </template>
+              <lay-menu-item id="20">
+                        <template #icon>
+          <lay-icon type="layui-icon-home"></lay-icon> 
+        </template>
+        <template #title>
+          首页
+        </template>
+              </lay-menu-item> 
+              <lay-menu-item id="21">
+                        <template #icon>
+          <lay-icon type="layui-icon-home"></lay-icon> 
+        </template>
+        <template #title>
+          首页
+        </template>
+              </lay-menu-item>
+              <lay-menu-item id="22">
+                        <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> 
+  </lay-menu>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    const selectedKey20 = ref("5")
+    const openKeys20 = ref(["7"])
+    const collapse20 = ref(true)   
+    const isTree20 = ref(true)
+    return {
+      selectedKey,
+      openKeys6,
+      colapse,
+      isTree
+    }
+  }
+}
+</script>
+
+:::
+
 ::: title 过渡动画
 :::