feat: add close

Author: unliar

src/components/common/Message/instance.ts

@@ -1,12 +1,18 @@
 import { createVNode, render } from "vue";
 import Ins from "./index.vue";
-import type { InstanceQueqe, MessageInstance, Options } from "./type";
+import type {
+    InstanceQueqe,
+    MessageInstance,
+    Options,
+    InstanceComponent,
+    IntanceOptions,
+} from "./type";
 
 const isServer = typeof window === "undefined";
 
 const Queqe: InstanceQueqe = [];
 let seed = 5201414;
-const Message: MessageInstance = (opts: Options | String) => {
+const Message: MessageInstance = (opts: IntanceOptions) => {
     if (isServer) return;
     let options: Options = {
         content: "",
@@ -50,17 +56,33 @@ const Message: MessageInstance = (opts: Options | String) => {
     render(vm, container);
     Queqe.push(vm);
     document.body.appendChild(container.firstElementChild as Element);
+    return {
+        close: () => {
+            (vm.component?.proxy as InstanceComponent).visible = false;
+        },
+    };
 };
 
-Message.closeAll = () => {};
-
-Message.success = () => {};
-
-Message.warn = () => {};
-
-Message.info = () => {};
+Message.closeAll = () => {
+    for (let i = Queqe.length - 1; i >= 0; i--) {
+        const instance = Queqe[i].component as any;
+        instance.ctx.close();
+    }
+};
 
-Message.error = () => {};
+(["success", "warn", "info", "error"] as const).forEach(type => {
+    Message[type] = (options: IntanceOptions) => {
+        if (typeof options === "string") {
+            options = {
+                content: options,
+                type,
+            };
+        } else {
+            options.type = type;
+        }
+        return Message(options);
+    };
+});
 
 const remove = (id: string, userOnclose?: () => void) => {
     const index = Queqe.findIndex(vm => {
@@ -76,8 +98,15 @@ const remove = (id: string, userOnclose?: () => void) => {
     const len = Queqe.length;
     if (len < 1) return;
     for (let i = index; i < len; i++) {
-        console.log("更改 fixed 高度 全部减去 - " + removedHeight, Queqe);
-        let top = [];
+        console.log(
+            "更改队列里全部高度 fixed 高度 全部减去 - " + removedHeight,
+            Queqe
+        );
+        const pos =
+            parseInt((Queqe[i] as any).el.style["top"], 10) -
+            removedHeight -
+            16;
+        (Queqe[i] as any).component.props.offset = pos;
     }
 };
 

src/components/common/Message/type.ts

@@ -1,13 +1,13 @@
-import type { VNode } from "vue";
+import type { VNode, ComponentPublicInstance } from "vue";
 
 export type MessageType = "warn" | "error" | "success" | "info";
 
 export type MessageInstance = {
-    (opt: Options): void;
-    warn(opt: Options): void;
-    error(opt: Options): void;
-    success(opt: Options): void;
-    info(opt: Options): void;
+    (opt: IntanceOptions): void;
+    warn(opt: IntanceOptions): void;
+    error(opt: IntanceOptions): void;
+    success(opt: IntanceOptions): void;
+    info(opt: IntanceOptions): void;
     closeAll(): void;
 };
 
@@ -21,4 +21,8 @@ export type Options = {
     id?: string;
 };
 
+export type InstanceComponent = ComponentPublicInstance<{ visible: boolean }>;
+
 export type InstanceQueqe = Array<VNode>;
+
+export type IntanceOptions = Options | string;

src/views/home/index.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup="">
 import { defineProps, onMounted, reactive } from "vue";
 import { useHead } from "@vueuse/head";
-import M from "~/components/common/Message/instance";
+import M, { useMessage } from "~/components/common/Message/instance";
 import { GetArticles } from "~/api/article";
 import ContentLayout from "~/components/layouts/Content/index.vue";
 import DefaultLayout from "~/components/layouts/Default/index.vue";
@@ -39,13 +39,8 @@ const getList = (req: API.ARTICLE.GetArticleListRequest) => {
 };
 
 onMounted(async () => {
-    setInterval(() => {
-        M({
-            content: "222",
-            type: "success",
-            onClose: () => console.log("onclose gogogog"),
-        });
-    }, 3000);
+    const m = useMessage();
+    m.info("ddd");
     await getList(props.query ?? {});
 });
 </script>