feat: 新增 menu 组件 collapseTransition 属性

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

@@ -140,7 +140,7 @@ export default {
 ::: demo
 
 <template>
-  <lay-collapse v-model="openKeys5" :isAmin="isAmin">
+  <lay-collapse v-model="openKeys5" :collapseTransition="collapseTransition">
     <lay-collapse-item title="标题1" id="1"> 内容1 </lay-collapse-item>
     <lay-collapse-item title="标题2" id="2"> 内容2 </lay-collapse-item>
     <lay-collapse-item title="标题3" id="3"> 内容3 </lay-collapse-item>
@@ -153,12 +153,12 @@ import { ref } from 'vue'
 export default {
   setup() {
 
-    const isAmin = ref(false)
+    const collapseTransition = ref(false)
     const openKeys5 = ref("2")
 
     return {
       openKeys5,
-      isAmin
+      collapseTransition
     }
   }
 }

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

@@ -21,7 +21,8 @@
           <li>[新增] transition 组件 type 属性, 默认为 collapse 过渡。</li>
           <li>[新增] transition 组件 enable 属性, 默认为 true 启用动画。</li>
           <li>[新增] transition 组件 type 属性 fade 值, 提供淡出淡入效果。</li>
-          <li>[新增] collapse 组件 isAmin 属性, 是否启用折叠动画, 默认为 true。</li>
+          <li>[新增] collapse 组件 collapseTransition 属性, 是否启用折叠动画, 默认为 true。</li>
+          <li>[新增] tree 组件 collapseTransition 属性, 是否启用折叠动画, 默认为 true。</li>
           <li>[新增] input 组件 allow-clear 属性, 提供输入清空。</li>
           <li>[新增] input 组件 prefix 插槽, 提供前缀设置。</li>
           <li>[新增] input 组件 suffix 插槽, 提供后缀设置。</li>

src/component/collapse/index.vue

@@ -11,13 +11,13 @@ import { withDefaults, provide, ref, watch } from "vue";
 export interface LayCollapseProps {
   modelValue?: number | string | [];
   accordion?: boolean;
-  isAmin?: boolean;
+  collapseTransition?: boolean;
 }
 
 const props = withDefaults(defineProps<LayCollapseProps>(), {
   modelValue: () => [],
   accordion: false,
-  isAmin: true,
+  collapseTransition: true,
 });
 
 // 监听传入的值
@@ -33,7 +33,7 @@ const activeValues = ref<Array<any>>(([] as any[]).concat(props.modelValue));
 
 provide("layCollapse", {
   accordion: props.accordion,
-  isAmin: props.isAmin,
+  collapseTransition: props.collapseTransition,
   activeValues,
   emit,
 });

src/component/collapseItem/index.vue

@@ -19,7 +19,7 @@ const props = withDefaults(defineProps<LayCollapseItemProps>(), {
   disabled: false,
 });
 
-const { accordion, activeValues, emit, isAmin } = inject("layCollapse") as any;
+const { accordion, activeValues, emit, collapseTransition } = inject("layCollapse") as any;
 
 let isShow = computed(() => {
   return activeValues.value.includes(props.id);
@@ -57,7 +57,7 @@ const showHandle = function () {
       <slot name="title" :props="props">{{ title }}</slot>
       <i class="layui-icon layui-colla-icon">{{ isShow ? "" : "" }}</i>
     </h2>
-    <lay-transition :enable="isAmin">
+    <lay-transition :enable="collapseTransition">
       <div v-if="isShow">
         <div class="layui-colla-content">
           <p>

src/component/menu/index.less

@@ -253,7 +253,7 @@
   color: #fff;
 }
 
-.layui-nav-itemed > .layui-nav-child {
+.layui-nav-tree .layui-nav-child {
   display: block;
   background-color: rgba(0, 0, 0, 0.2);
 }
@@ -297,7 +297,7 @@
   * {
     color: grey !important;
   }
-  .layui-nav-itemed > .layui-nav-child {
+  .layui-nav-child {
     background-color: rgba(0, 0, 0, 0.02);
   }
 }

src/component/menu/index.vue

@@ -16,6 +16,7 @@ export interface LayMenuProps {
   inverted?: boolean | string;
   level?: boolean | string;
   collapse?: boolean | string;
+  collapseTransition?: boolean | string;
 }
 
 const emit = defineEmits(["update:selectedKey", "update:openKeys"]);
@@ -28,12 +29,14 @@ const props = withDefaults(defineProps<LayMenuProps>(), {
   inverted: false,
   level: false,
   collapse: false,
+  collapseTransition: true
 });
 
 let oldOpenKeys = ref<string[]>([]);
 
 const isTree = computed(() => props.tree);
 const isCollapse = computed(() => props.collapse);
+const isCollapseTransition = computed(() => props.collapseTransition);
 
 const openKeys = computed({
   get() {
@@ -72,6 +75,7 @@ provide("isTree", isTree);
 provide("selectedKey", selectedKey);
 provide("openKeys", openKeys);
 provide("isCollapse", isCollapse);
+provide("isCollapseTransition", isCollapseTransition);
 </script>
 
 <template>

src/component/subMenu/index.vue

@@ -15,6 +15,7 @@ import {
   watch,
 } from "vue";
 import { onClickOutside } from "@vueuse/core";
+import LayTransition from "../transition";
 
 export interface LaySubMenuProps {
   id: string;
@@ -29,6 +30,9 @@ 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 isCollapseTransition: Ref<boolean> = inject(
+  "isCollapseTransition"
+) as Ref<boolean>;
 
 const isOpen = computed(() => {
   return openKeys.value.includes(props.id);
@@ -84,7 +88,6 @@ onBeforeUnmount(() => window.removeEventListener("resize", setPosition));
 <template>
   <li
     class="layui-nav-item"
-    :class="[isOpen && isTree ? 'layui-nav-itemed' : '']"
   >
     <a href="javascript:void(0)" @click="openHandle()">
       <i>
@@ -98,16 +101,23 @@ onBeforeUnmount(() => window.removeEventListener("resize", setPosition));
         class="layui-icon layui-icon-down layui-nav-more"
       ></i>
     </a>
+    <template v-if="isTree">
+      <lay-transition :enable="isCollapseTransition">
+        <div v-if="isOpen">
+          <dl class="layui-nav-child" v-if="isOpen">
+            <slot></slot>
+          </dl>
+        </div>
+      </lay-transition>
+    </template>
+    <template v-else>
       <dl
-      class="layui-nav-child"
         ref="subMenuRef"
-      :class="[
-        position,
-        isOpen && !isTree ? 'layui-show' : '',
-        !isTree ? 'layui-anim layui-anim-upbit' : '',
-      ]"
+        class="layui-nav-child layui-anim layui-anim-upbit"
+        :class="{ 'layui-show': isOpen, position }"
       >
         <slot></slot>
       </dl>
+    </template>
   </li>
 </template>