feat: 新增 menu 组件 collapse 属性

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;
-}
+}

src/component/button/index.vue

@@ -67,4 +67,4 @@ const classes = computed(() => {
     ></i>
     <slot v-else></slot>
   </button>
-</template>
+</template>

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",

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;

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>

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>

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"

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;
-}
+}