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

2022-01-05 14:56:16 +08:00 · 2022-01-05 14:56:16 +08:00 · c1ac6921f8
commit c1ac6921f8
parent 7734f0cb5b
10 changed files with 172 additions and 76 deletions
--- a/example/docs/zh-CN/components/menu.md
+++ b/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-menu-item> 
+        </lay-sub-menu>
+    </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">
-      <template v-slot:title> 
-        <router-link to="">无感</router-link>
-      </template>
-    </lay-menu-item>
+    <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-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>
--- a/example/docs/zh-CN/guide/changelog.md
+++ b/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>
--- 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="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>

--- a/example/src/assets/logo-new.png
+++ b/example/src/assets/logo-new.png
--- a/example/src/view/component.vue
+++ b/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",
+          },
        ],
      },
      {
--- a/src/css/layui.css
+++ b/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 {
-  padding-top: 5px;
-  padding-bottom: 5px;
+.layui-nav-tree .layui-nav-item * {
+  color: rgba(255, 255, 255, 0.7);
 }

 .layui-nav-tree .layui-nav-more {
--- a/src/index.ts
+++ b/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 };
--- a/src/module/menuItem/index.vue
+++ b/src/module/menuItem/index.vue
@ -1,39 +1,12 @@
-<template>
-  <li
-    v-if="slots.default"
-    class="layui-nav-item"
-    :class="[openKeys.includes(id) && isTree ? 'layui-nav-itemed' : '']"
-  >
-    <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>
+<script lang="ts">
+export default {
+  name: "LayMenuItem"
+}
+</script>

-  <li
-    v-else
-    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 lang="ts">
+import { defineProps, inject, Ref, useSlots } from "vue";

-<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>
--- a/src/module/subMenu/index.ts
+++ b/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;
--- a/src/module/subMenu/index.vue
+++ b/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>