!94 菜单缩进配置和完善文档

Merge pull request !94 from 傅子湘/next

package/component/src/component/menu/index.less

@@ -183,6 +183,7 @@
 .layui-nav-tree .layui-nav-item {
   width: 100%;
   display: block;
+  box-sizing: border-box;
   line-height: 42px;
 }
 

package/component/src/component/menu/index.vue

@@ -18,6 +18,7 @@ export interface LayMenuProps {
   level?: boolean | string;
   collapse?: boolean | string;
   collapseTransition?: boolean | string;
+  indent?: boolean | string; // 菜单栏是否缩进
 }
 
 const emit = defineEmits([
@@ -36,6 +37,7 @@ const props = withDefaults(defineProps<LayMenuProps>(), {
   level: true,
   collapse: false,
   collapseTransition: true,
+  indent: false,
 });
 
 const isTree: ComputedRef<boolean> = computed(() => props.tree);
@@ -68,6 +70,15 @@ const selectedKey = computed({
   },
 });
 
+const indent = computed({
+  get() {
+    return props.indent;
+  },
+  set(val) {
+    // emit("update:indent", val);
+  },
+});
+
 watch(
   () => props.collapse,
   () => {
@@ -87,6 +98,7 @@ provide("openKeys", openKeys);
 provide("isCollapse", isCollapse);
 provide("isCollapseTransition", isCollapseTransition);
 provide("menuTheme", menuTheme);
+provide("indent", indent);
 </script>
 
 <template>

package/component/src/component/menu/utils.ts

@@ -0,0 +1,17 @@
+// 处理菜单栏缩进
+export function indentHandle(obj: {
+  indent: boolean | string;
+  level: number;
+  basePadding?: number;
+}) {
+  const { indent, level, basePadding = 0 } = obj;
+  const least: number = level - 1; // 第一层不缩进
+  if (indent && least > 0) {
+    const px =
+      typeof indent === "boolean"
+        ? `${basePadding + 10 * least}px` // css样式表对<a>设定了23基础边距
+        : indent.replace(/\d+/g, (s) => (basePadding + least * +s).toString());
+    return `padding-left: ${px}`;
+  }
+  return "";
+}

package/component/src/component/menuItem/index.vue

@@ -8,6 +8,7 @@ export default {
 import { computed, ComputedRef, inject, ref, Ref, useSlots } from "vue";
 import { DropdownContext, dropdownInjectionKey } from "../dropdown/interface";
 import useLevel from "../menu/useLevel";
+import { indentHandle } from "../menu/utils";
 import LayTooltip from "../tooltip/index.vue";
 
 export interface LayMenuItemProps {
@@ -22,6 +23,7 @@ const selectedKey: Ref<string> = inject("selectedKey") as Ref<string>;
 const isTree = inject("isTree") as ComputedRef<boolean>;
 const isCollapse = inject("isCollapse") as ComputedRef<boolean | string>;
 const theme = inject("menuTheme") as Ref<string>;
+const indent = inject("indent") as Ref<string | boolean>;
 const dropdownCtx = inject<DropdownContext | undefined>(
   dropdownInjectionKey,
   undefined
@@ -44,6 +46,7 @@ const needTooltip = computed(
   <li
     class="layui-nav-item"
     :class="[selectedKey === id ? 'layui-this' : '']"
+    :style="isTree && indentHandle({ indent, level })"
     @click="selectHandle()"
   >
     <template v-if="needTooltip">

package/component/src/component/subMenu/index.vue

@@ -8,6 +8,7 @@ export default {
 import { computed, inject, ref, Ref, useSlots, watchEffect } from "vue";
 import LayTransition from "../transition/index.vue";
 import SubMenuPopup from "./SubMenuPopup.vue";
+import { indentHandle } from "../menu/utils";
 import { provideLevel, default as useLevel } from "../menu/useLevel";
 
 export interface LaySubMenuProps {
@@ -22,6 +23,7 @@ const { level } = useLevel();
 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 indent = inject("indent") as Ref<string | boolean>;
 const isCollapse: Ref<boolean | string> = inject("isCollapse") as Ref<
   boolean | string
 >;
@@ -70,7 +72,17 @@ const openHandle = function () {
 
 <template>
   <li v-if="!needPopup" class="layui-nav-item">
-    <a href="javascript:void(0)" @click="openHandle()">
+    <a
+      href="javascript:void(0)"
+      @click="openHandle()"
+      :style="
+        indentHandle({
+          indent,
+          level,
+          basePadding: 23,
+        })
+      "
+    >
       <!-- 图标 -->
       <i v-if="slots.icon" class="layui-sub-menu-icon">
         <slot name="icon"></slot>

package/document-component/src/document/zh-CN/components/menu.md

@@ -80,7 +80,7 @@ export default {
 ::: demo
 
 <template>
-  <lay-menu :selected-key="selectedKey" @change-selected-Key="changeSelectedKey" @change-open-keys="changeOpenKeys" v-model:openKeys="openKeys2" :tree="true">
+  <lay-menu :selected-key="selectedKey" @change-selected-Key="changeSelectedKey" :indent="true" @change-open-keys="changeOpenKeys" v-model:openKeys="openKeys2" :tree="true">
     <lay-menu-item id="1">首页</lay-menu-item>
     <lay-menu-item id="2">首页</lay-menu-item>
     <lay-menu-item id="3">首页</lay-menu-item> 
@@ -96,7 +96,21 @@ export default {
             </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 title="菜单" id="13">
+                <template #title>
+                  首页
+                </template>
+                <lay-menu-item id="14">首页</lay-menu-item> 
+                <lay-menu-item id="15">首页</lay-menu-item>
+                <lay-sub-menu title="菜单" id="16">
+                    <template #title>
+                      首页
+                    </template>
+                    <lay-menu-item id="17">首页</lay-menu-item> 
+                    <lay-menu-item id="18">首页</lay-menu-item>
+                    <lay-menu-item id="19">首页</lay-menu-item>
+                </lay-sub-menu>
+            </lay-sub-menu>
         </lay-sub-menu>
     </lay-sub-menu> 
   </lay-menu>
@@ -119,6 +133,7 @@ export default {
     }
 
     return {
+      indent,
       openKeys2,
       selectedKey,
       changeOpenKeys,
@@ -753,6 +768,7 @@ export default {
 | level               | 菜单层级       | `true` `false` |
 | collapse            | 折叠状态       | `true` `false` |
 | collapse-transition  | 折叠动画       | `true` `false` |
+| indent              | 菜单缩进        | `10px` `20px` `true`  |
 
 :::