🐛(layer): 修复 drawer 出场动画不生效

package/layer/src/component/index.vue

@@ -359,6 +359,7 @@ const boxClasses = computed(() => {
     type === 1 ? "layui-layer-page" : "",
     type === 2 ? "layui-layer-iframe" : "",
     type === 3 ? "layui-layer-loading" : "",
+    type === 4 ? "layui-layer-drawer" : "",
     type === 5 ? "layui-layer-photos" : "",
     props.isMessage ? "layui-layer-msg" : "",
     props.isMessage && !props.icon ? "layui-layer-hui" : "",
@@ -371,7 +372,7 @@ const boxClasses = computed(() => {
  * <p>
  */
 const supportMove = function () {
-  if (props.move && props.type != "drawer") {
+  if (props.move && type != 4) {
     nextTick(() => {
       // @ts-ignore 拖拽
       useMove(layero.value, (left, top) => {
@@ -473,7 +474,7 @@ const iconClass = computed(() => {
  * @param anim 入场动画
  */
 const enterActiveClass = computed(() => {
-  if (props.type === "drawer") {
+  if (type === 4) {
     return getDrawerAnimationClass(props.offset);
   }
   return `layer-anim layer-anim-0${props.anim}`;
@@ -592,7 +593,7 @@ defineExpose({ reset, open, close });
           :style="{ height: contentHeight }"
           :class="contentClasses"
         >
-          <template v-if="type === 0 || type === 1">
+          <template v-if="type === 0 || type === 1 || type === 4">
             <i v-if="icon" :class="iconClass"></i>
             <slot v-if="slots.default"></slot>
             <template v-else>

package/layer/src/theme/index.css

@@ -866,11 +866,17 @@ html #layuicss-layer {
     text-align: left
 }
 
+.layui-layer-drawer {
+    border-radius: 0px;
+}
+
+.layui-layer-drawer .layui-layer-content,
 .layui-layer-page .layui-layer-content {
     position: relative;
     overflow: auto
 }
 
+.layui-layer-drawer .layui-layer-btn,
 .layui-layer-iframe .layui-layer-btn,
 .layui-layer-page .layui-layer-btn {
     padding-top: 10px

package/layer/src/utils/index.ts

@@ -112,18 +112,15 @@ export function calculateOffset(offset: any, area: any, type: any) {
 export function calculateType(modalType: number | string) {
   if (modalType === "dialog" || modalType == 0) {
     return 0;
-  } else if (
-    modalType === "page" ||
-    modalType === "drawer" ||
-    modalType == 1 ||
-    modalType == 4
-  ) {
+  } else if (modalType === "page" || modalType == 1) {
     return 1;
   } else if (modalType === "iframe" || modalType == 2) {
     return 2;
   } else if (modalType === "loading" || modalType == 3) {
     return 3;
-  } else if (modalType === "photos") {
+  } else if (modalType === "drawer" || modalType == 4) {
+    return 4;
+  }  else if (modalType === "photos") {
     return 5;
   }
   return 0;