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

package/component/src/component/affix/index.vue

@@ -39,13 +39,13 @@ const getStyle = computed(() => {
       position: "fixed !important",
       top: "unset",
       bottom: "unset",
-      left: orginOffsetLeft - marginLeft + 'px',
+      left: orginOffsetLeft - marginLeft + "px",
     };
     if (affixTop.value) {
       style.top = fixedTop - marginTop + "px";
       return style;
     } else {
-      if (props.hasOwnProperty('bottom')) {
+      if (props.hasOwnProperty("bottom")) {
         style.bottom = props.bottom + "px";
         return style;
       } else {
@@ -60,7 +60,7 @@ const checkInWindow = () => {
     let offsetTop = dom.value.offsetTop;
     let scrollTop = props.target?.scrollTop;
 
-    if (typeof props.bottom === 'undefined') {
+    if (typeof props.bottom === "undefined") {
       //top检查 当前元素与容器顶部距离-减去滚动条的高度+容器offsetTop
       let result = offsetTop - scrollTop + props.target.offsetTop;
       if (result < fixedTop) {
@@ -69,7 +69,7 @@ const checkInWindow = () => {
             outWindow.value = false;
           }
         } else {
-          changeScrollTop = scrollTop
+          changeScrollTop = scrollTop;
           outWindow.value = true;
           affixTop.value = true;
         }
@@ -77,19 +77,22 @@ const checkInWindow = () => {
       }
     } else {
       //bottom检查 可视区窗口高度 + 文档滚动高度 - 当前元素与容器顶部距离 - 当前元素高度
-      let viewHeight = props.target.offsetHeight > window.innerHeight ? window.innerHeight : props.target.offsetHeight
+      let viewHeight =
+        props.target.offsetHeight > window.innerHeight
+          ? window.innerHeight
+          : props.target.offsetHeight;
       let result = viewHeight + scrollTop - offsetTop - dom.value.offsetHeight;
       if (outWindow.value) {
         if (scrollTop >= changeScrollTop) {
           if (props.bottom == 0) {
-            console.log(scrollTop)
+            console.log(scrollTop);
           }
           outWindow.value = false;
         }
       } else {
         if (result < fixedBottom) {
-          changeScrollTop = scrollTop - result + props.bottom
-          console.log(changeScrollTop)
+          changeScrollTop = scrollTop - result + props.bottom;
+          console.log(changeScrollTop);
           outWindow.value = true;
           affixTop.value = false;
         }
@@ -105,17 +108,18 @@ const getDomStyle = (dom: any, attr: string) => {
     // @ts-ignore
     return document.defaultView.getComputedStyle(dom, null)[attr];
   }
-}
+};
 
 onMounted(() => {
   nextTick(() => {
-    orginOffsetLeft = dom.value.getBoundingClientRect().left
-    fixedTop = props.top + props.target.offsetTop
-    if (typeof props.bottom !== 'undefined') {
-      fixedBottom = props.bottom + parseFloat(getDomStyle(dom.value, 'marginBottom'))
+    orginOffsetLeft = dom.value.getBoundingClientRect().left;
+    fixedTop = props.top + props.target.offsetTop;
+    if (typeof props.bottom !== "undefined") {
+      fixedBottom =
+        props.bottom + parseFloat(getDomStyle(dom.value, "marginBottom"));
     }
-    marginLeft = parseFloat(getDomStyle(dom.value, 'marginLeft'))
-    marginTop = parseFloat(getDomStyle(dom.value, 'marginTop'))
+    marginLeft = parseFloat(getDomStyle(dom.value, "marginLeft"));
+    marginTop = parseFloat(getDomStyle(dom.value, "marginTop"));
     props.target.addEventListener("scroll", checkInWindow, true);
     checkInWindow();
   });

package/document-layer/main.ts

@@ -5,6 +5,7 @@ import { Router } from "vue-router";
 import LayCode from "./src/components/LayCode.vue";
 import Children1 from "./src/components/Children1.vue";
 import Children2 from "./src/components/Children2.vue";
+import layer from "../layer/src/index";
 import "./src/assets/css/index.css";
 
 export function createApp(): {
@@ -15,6 +16,7 @@ export function createApp(): {
   const router = createRouter();
 
   app
+    .use(layer)
     .use(router)
     .component("LayCode", LayCode)
     .component("Children1", Children1)

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;