Merge branch 'next' of https://gitee.com/layui/layui-vue into next

package/layer/src/component/Notifiy.vue

@@ -17,7 +17,7 @@ export default {
 };
 </script>
 <script lang="ts" setup>
-import { nextTick, onMounted, ref } from "vue";
+import { nextTick, onMounted, ref, shallowRef } from "vue";
 import CloseBtnVue from "./CloseBtn.vue";
 
 export interface LayNotifyProps {
@@ -35,7 +35,7 @@ const emit = defineEmits(["close"]);
 const close = () => {
   emit("close");
 };
-function addClass(obj: { className: any }, cls: string) {
+function addClass(obj: HTMLElement, cls: string) {
   //获取 class 内容.
   let obj_class = obj.className,
     //判断获取到的 class 是否为空, 如果不为空在前面加个'空格'.
@@ -44,19 +44,17 @@ function addClass(obj: { className: any }, cls: string) {
   obj.className = added; //替换原来的 class.
 }
 
-const notifyRef = ref<HTMLElement | null>(null);
+const notifyRef = shallowRef<HTMLElement | null>(null);
 onMounted(() => {
   nextTick(() => {
-    if (notifyRef.value) {
     setTimeout(() => {
       //此处延迟加载class，以免影响弹出效果
-        // @ts-ignore
+      if (!notifyRef.value?.parentElement?.parentElement) return;
       addClass(
-          notifyRef.value.parentElement?.parentElement,
+        notifyRef.value?.parentElement?.parentElement,
         "layui-layer-notify"
       );
     }, 300);
-    }
   });
 });
 </script>

package/layer/src/component/index.vue

@@ -177,7 +177,6 @@ const firstOpenDelayCalculation = function () {
       area.value = calculateDrawerArea(props.offset, props.area);
     }
     if (type == 5) {
-      // @ts-ignore
       area.value = await calculatePhotosArea(
         props.imgList[props.startIndex].src,
         props
@@ -395,13 +394,14 @@ const boxClasses = computed(() => {
 const supportMove = function () {
   if (props.move && type != 4) {
     nextTick(() => {
-      // @ts-ignore 拖拽
+      // 拖拽
-      useMove(layero.value, (left, top) => {
+      if (!layero.value) return;
+      useMove(layero.value, (left: string, top: string) => {
         l.value = left;
         t.value = top;
       });
-      // @ts-ignore 拉伸
+      // 拉伸
-      useResize(layero.value, (width, height) => {
+      useResize(layero.value, (width: string, height: string) => {
         h.value = height;
         w.value = width;
       });
@@ -450,6 +450,7 @@ const closeHandle = () => {
 
   //Notify 从队列中移除当前实例
   if (type === 6) {
+    //@ts-ignore
     removeNotifiyFromQueen(props.id);
   }
 };
@@ -524,7 +525,7 @@ const leaveActiveClass = computed(() => {
 });
 
 /**
- * 打卡弹层
+ * 打开弹层
  * <p>
  */
 const open = () => {
@@ -576,7 +577,6 @@ const showTitle = computed(() => {
  */
 const resetCalculationPohtosArea = function (index: number) {
   nextTick(async () => {
-    // @ts-ignore
     area.value = await calculatePhotosArea(props.imgList[index].src, props);
     offset.value = calculateOffset(props.offset, area.value, props.type);
     w.value = area.value[0];

package/layer/src/utils/index.ts

@@ -264,7 +264,10 @@ export function getDrawerAnimationClass(offset: any, isClose: boolean = false) {
 }
 
 //计算图片大小 并缩放
-export async function calculatePhotosArea(url: string, options: object) {
+export async function calculatePhotosArea(
+  url: string,
+  options: object
+): Promise<Array<string>> {
   let img = new Image();
   img.src = url;
   return new Promise((resolve, reject) => {
@@ -311,10 +314,8 @@ export function calculateNotifOffset(offset: any, area: any, layerId: string) {
   // 间隙
   let transOffsetLeft = 15;
   let transOffsetTop = 15;
-  // @ts-ignore
+  (window as any).NotifiyQueen = (window as any).NotifiyQueen || [];
-  window.NotifiyQueen = window.NotifiyQueen || [];
+  let notifiyQueen = (window as any).NotifiyQueen;
-  // @ts-ignore
-  let notifiyQueen = window.NotifiyQueen;
   if (typeof offset != "string" || arr.indexOf(offset) === -1) {
     offset = "rt";
   }
@@ -366,19 +367,14 @@ export function calculateNotifOffset(offset: any, area: any, layerId: string) {
 }
 
 //移除Notify队列中某项，并且重新计算其他Notify位置
-export function removeNotifiyFromQueen(layerId: string | undefined) {
+export function removeNotifiyFromQueen(layerId: string) {
   // 间隙
   let transOffsetTop = 15;
-  // @ts-ignore 删除项的高度
+  // 删除项的高度
-  let offsetHeight =
+  let notifiyDom = document.getElementById(layerId)?.firstElementChild?.firstElementChild as HTMLElement;
-    // @ts-ignore
+  let offsetHeight = notifiyDom.offsetHeight;
-    // @ts-ignore
+  (window as any).NotifiyQueen = (window as any).NotifiyQueen || [];
-    document.getElementById(layerId)?.firstElementChild?.firstElementChild
+  let notifiyQueen = (window as any).NotifiyQueen;
-      ?.offsetHeight;
-  // @ts-ignore
-  window.NotifiyQueen = window.NotifiyQueen || [];
-  // @ts-ignore
-  let notifiyQueen = window.NotifiyQueen;
   let index = notifiyQueen.findIndex((e: { id: string }) => e.id === layerId);
   let offsetType = notifiyQueen[index].offset;
   let list = notifiyQueen.filter((e: { offset: any }) => {
@@ -390,22 +386,11 @@ export function removeNotifiyFromQueen(layerId: string | undefined) {
   // //得到需要修改的定位的Notifiy集合
   let needCalculatelist = list.slice(findIndex + 1);
   needCalculatelist.forEach((e: { id: string }) => {
-    let dom = document.getElementById(e.id)?.firstElementChild
+    let dom = document.getElementById(e.id)?.firstElementChild?.firstElementChild as HTMLElement;
-      ?.firstElementChild;
     if (offsetType === "rt" || offsetType === "lt") {
-      // @ts-ignore
+      dom.style["top"] = parseFloat(dom.style["top"]) - transOffsetTop - offsetHeight + "px";
-      dom.style["top"] =
-        // @ts-ignore
-        parseFloat(dom.style["top"]) - transOffsetTop - offsetHeight + "px";
     } else {
-      // @ts-ignore
+      let bottom = parseFloat(dom.style["top"].split(" - ")[1]) - transOffsetTop - offsetHeight; dom.style["top"] = "calc(100vh - " + bottom + "px)";
-      let bottom =
-        // @ts-ignore
-        parseFloat(dom.style["top"].split(" - ")[1]) -
-        transOffsetTop -
-        offsetHeight;
-      // @ts-ignore
-      dom.style["top"] = "calc(100vh - " + bottom + "px)";
     }
   });
   notifiyQueen.splice(index, 1); //删除