拆分 menu-item 组件, 为 sub-menu 与 menu-item

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

@@ -11,15 +11,15 @@
     <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="目录" id="7">
+    <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 title="菜单三" id="10">
+        <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>
+        </lay-sub-menu>
-    </lay-menu-item> 
+    </lay-sub-menu> 
   </lay-menu>
 </template>
 
@@ -48,20 +48,68 @@ export default {
 
 <template>
   <lay-menu v-model:selectedKey="selectedKey" v-model:openKeys="openKeys" v-model:tree="isTree">
-    <lay-menu-item title="首页" id="1">
+    <lay-menu-item title="首页" id="1"></lay-menu-item>
-      <template v-slot:title> 
-        <router-link to="">无感</router-link>
-      </template>
-    </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="目录" id="7">
+    <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 title="菜单三" id="10">
+        <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-sub-menu>
+    </lay-sub-menu> 
+  </lay-menu>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    const isTree = ref(true)
+    const selectedKey = ref("5")
+    const openKeys = ref(["7"])
+
+    return {
+      isTree,
+      openKeys,
+      selectedKey
+    }
+  }
+}
+</script>
+
+:::
+
+
+::: title 菜单插槽
+:::
+
+::: demo
+
+<template>
+  <lay-menu v-model:selectedKey="selectedKey" v-model:openKeys="openKeys" v-model:tree="isTree">
+    <lay-menu-item id="1">
+      <template v-slot:title> 
+        <router-link to="">首页</router-link>
+      </template>
+    </lay-menu-item>
+    <lay-menu-item id="7">
+        <template v-slot:title> 
+          <router-link to="">目录</router-link>
+        </template>
+        <lay-menu-item id="8">
+          <template v-slot:title> 
+            <router-link to="">菜单一</router-link>
+          </template>
+        </lay-menu-item> 
+        <lay-menu-item id="9">
+          <template v-slot:title> 
+            <router-link to="">菜单二</router-link>
+          </template>
         </lay-menu-item>
     </lay-menu-item> 
   </lay-menu>

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

@@ -14,10 +14,12 @@
     <ul> 
       <a name="0-3-3"> </a> 
       <li> 
-        <h3>0.3.3 <span class="layui-badge-rim">2022-01-03</span></h3> 
+        <h3>0.3.3 <span class="layui-badge-rim">2022-01-05</span></h3> 
         <ul> 
           <li>[新增] setup 步骤条组件。</li>
+          <li>[新增] slider 滑块组件 vertical 属性, 支持垂直布局。</li>
           <li>[新增] timeline-item 时间线组件 dot 插槽, 支持自定义节点内容。</li>
+          <li>[修复] sub-menu 目录组件, 与 menu-item 组合使用。</li>
           <li>[修复] menu 组件 layui-nav-more 切换动画。</li>
         </ul> 
       </li>

example/docs/zh-CN/guide/introduce.md

@@ -3,7 +3,7 @@
 
 <p>
   <a href="http://layui-vue.pearadmin.com">
-    <img src="https://sentsin.gitee.io/res/images/layui/layui.png" alt="layui" width="500">
+    <img src="../../../src/assets/logo-new.png" alt="layui" width="500">
   </a>
 </p>
 

example/src/view/component.vue

@@ -104,12 +104,6 @@ export default {
         id: 1,
         title: "布局",
         children: [
-          {
-            id: 111,
-            title: "骨架屏",
-            subTitle: "skeleton",
-            path: "/zh-CN/components/skeleton",
-          },
           {
             id: 4,
             title: "布局",
@@ -140,6 +134,12 @@ export default {
             subTitle: "card",
             path: "/zh-CN/components/card",
           },
+          {
+            id: 10,
+            title: "骨架",
+            subTitle: "skeleton",
+            path: "/zh-CN/components/skeleton",
+          },
         ],
       },
       {

src/css/layui.css

@@ -2885,12 +2885,10 @@ body .layui-table-tips .layui-layer-content {
   line-height: 60px;
 }
 
-.layui-nav .layui-nav-item a {
+.layui-nav .layui-nav-item >  a {
   display: block;
   padding: 0 30px;
-  color: #fff;
   color: rgba(255, 255, 255, 0.7);
-  -webkit-transition: all 0.3s;
 }
 
 .layui-nav .layui-this:after,
@@ -3010,18 +3008,18 @@ body .layui-table-tips .layui-layer-content {
   line-height: 42px;
 }
 
-.layui-nav-tree .layui-nav-item a {
+.layui-nav-tree .layui-nav-item > a {
   position: relative;
   height: 42px;
   line-height: 42px;
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
+  padding: 5px 30px 5px 30px;
 }
 
-.layui-nav-tree .layui-nav-item > a {
+.layui-nav-tree .layui-nav-item * {
-  padding-top: 5px;
+  color: rgba(255, 255, 255, 0.7);
-  padding-bottom: 5px;
 }
 
 .layui-nav-tree .layui-nav-more {

src/index.ts

@@ -70,6 +70,7 @@ import LaySkeleton from "./module/skeleton/index";
 import LaySkeletonItem from "./module/skeletonItem/index";
 import LayStep from "./module/step/index";
 import LayStepItem from "./module/stepItem/index";
+import LaySubMenu from "./module/subMenu/index"
 
 const components: Record<string, IDefineComponent> = {
   LayRadio,
@@ -136,6 +137,7 @@ const components: Record<string, IDefineComponent> = {
   LayCountUp,
   LayStep,
   LayStepItem,
+  LaySubMenu
 };
 
 const install = (app: App, options?: InstallOptions): void => {
@@ -148,13 +150,9 @@ const install = (app: App, options?: InstallOptions): void => {
 };
 
 export {
-  LayStep,
-  LayStepItem,
-  LaySkeleton,
-  LaySkeletonItem,
   LayRadio,
-  LayIcon,
   LayButton,
+  LayIcon,
   LayBacktop,
   LayLayout,
   LaySide,
@@ -208,7 +206,15 @@ export {
   LayCarousel,
   LayCarouselItem,
   LayColorPicker,
-  LayLayer
+  LayLayer,
+  LayTooltip,
+  LayInputNumber,
+  LaySkeleton,
+  LaySkeletonItem,
+  LayCountUp,
+  LayStep,
+  LayStepItem,
+  LaySubMenu
 };
 
 export { layer };

src/module/menuItem/index.vue

@@ -1,39 +1,12 @@
-<template>
+<script lang="ts">
-  <li
+export default {
-    v-if="slots.default"
+  name: "LayMenuItem"
-    class="layui-nav-item"
+}
-    :class="[openKeys.includes(id) && isTree ? 'layui-nav-itemed' : '']"
+</script>
-  >
-    <a href="javascript:void(0)" @click="openHandle">
-      {{ title }}
-      <i :class="[openKeys.includes(id) && !isTree ? 'layui-nav-mored' : '']" class="layui-icon layui-icon-down layui-nav-more"></i>
-    </a>
-    <dl
-      class="layui-nav-child"
-      :class="[
-        openKeys.includes(id) && !isTree ? 'layui-show' : '',
-        !isTree ? 'layui-anim layui-anim-upbit' : '',
-      ]"
-    >
-      <slot></slot>
-    </dl>
-  </li>
 
-  <li
+<script setup lang="ts">
-    v-else
+import { defineProps, inject, Ref, useSlots } from "vue";
-    class="layui-nav-item"
-    :class="[selectedKey === id ? 'layui-this' : '']"
-    @click="selectHandle()"
-  >
-    <slot v-if="slots.title" name="title"></slot>
-    <a v-else href="javascript:void(0)">
-      {{ title }}
-    </a>
-  </li>
-</template>
 
-<script setup name="LayMenuItem" lang="ts">
-import { defineProps, inject, Ref, ref, useSlots } from "vue";
 const slots = useSlots();
 
 const props = defineProps<{
@@ -41,19 +14,22 @@ const props = defineProps<{
   title: string;
 }>();
 
-const isTree = inject("isTree");
 const selectedKey: Ref<string> = inject("selectedKey") as Ref<string>;
-const openKeys: Ref<string[]> = inject("openKeys") as Ref<string[]>;
-
-const openHandle = function () {
-  if (openKeys.value.includes(props.id)) {
-    openKeys.value.splice(openKeys.value.indexOf(props.id), 1);
-  } else {
-    openKeys.value.push(props.id);
-  }
-};
 
 const selectHandle = function () {
   selectedKey.value = props.id;
 };
 </script>
+
+<template>
+  <li
+    class="layui-nav-item"
+    :class="[selectedKey === id ? 'layui-this' : '']"
+    @click="selectHandle()"
+  >
+    <a href="javascript:void(0)">
+      <slot v-if="slots.default"></slot>
+      <span v-else>{{ title }}</span>
+    </a>
+  </li>
+</template>

src/module/subMenu/index.ts

@@ -0,0 +1,9 @@
+import type { App } from "vue";
+import Component from "./index.vue";
+import type { IDefineComponent } from "../type/index";
+
+Component.install = (app: App) => {
+  app.component(Component.name || "laySubMenu", Component);
+};
+
+export default Component as IDefineComponent;

src/module/subMenu/index.vue

@@ -0,0 +1,57 @@
+<script lang="ts">
+export default {
+  name: "LaySubMenu",
+};
+</script>
+
+<script setup lang="ts">
+import { computed, defineProps, inject, Ref, useSlots } from "vue";
+
+const slots = useSlots();
+
+const props = defineProps<{
+  id: string;
+  title: string;
+}>();
+
+const isTree = inject("isTree");
+const selectedKey: Ref<string> = inject("selectedKey") as Ref<string>;
+const openKeys: Ref<string[]> = inject("openKeys") as Ref<string[]>;
+
+const openHandle = function () {
+  if (openKeys.value.includes(props.id)) {
+    openKeys.value.splice(openKeys.value.indexOf(props.id), 1);
+  } else {
+    openKeys.value.push(props.id);
+  }
+};
+
+const isOpen = computed(() => {
+  return openKeys.value.includes(props.id);
+});
+</script>
+
+<template>
+  <li
+    class="layui-nav-item"
+    :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
+        :class="[isOpen && !isTree ? 'layui-nav-mored' : '']"
+        class="layui-icon layui-icon-down layui-nav-more"
+      ></i>
+    </a>
+    <dl
+      class="layui-nav-child"
+      :class="[
+        isOpen && !isTree ? 'layui-show' : '',
+        !isTree ? 'layui-anim layui-anim-upbit' : '',
+      ]"
+    >
+      <slot></slot>
+    </dl>
+  </li>
+</template>