fix: 修改Message基础使用 通过删除组件实例来清除组件并且重新计算其它Message的offset值

Author: coderyjw

src/lib/message/src/message-method.ts

@@ -1,4 +1,4 @@
-import { createVNode, render, ref } from "vue";
+import { createVNode, render, ref, VNode } from "vue";
 import type { MessageQueue } from "./message";
 import MessageConstructor from "./message.vue";
 let seed = 1;
@@ -12,11 +12,15 @@ const message = function (options = {}) {
  });
 
  const id = `message_${seed++}`;
+ const userOnClose = (options as any).onClose;
  const props = {
  id,
  offset: verticalOffset,
  zIndex: zIndex.value++,
  ...options,
+ onClose: () => {
+ close(id, userOnClose);
+ },
  };
 
  let appendTo: HTMLElement | null = document.body;
@@ -36,6 +40,33 @@ const message = function (options = {}) {
  render(vm, container);
  instances.push({ vm });
  appendTo.appendChild(container.firstElementChild!);
+
+ return {
+ // instead of calling the onClose function directly, setting this value so that we can have the full lifecycle
+ // for out component, so that all closing steps will not be skipped.
+ close: () => ((vm.component!.proxy as any).visible = false),
+ };
 };
 
+export function close(id: string, userOnClose?: (vm: VNode) => void): void {
+ const idx = instances.findIndex(({ vm }) => id === vm.component!.props.id);
+ if (idx === -1) return;
+
+ const { vm } = instances[idx];
+ if (!vm) return;
+ userOnClose?.(vm);
+
+ const removedHeight = vm.el!.offsetHeight;
+ instances.splice(idx, 1);
+
+ // adjust other instances vertical offset
+ const len = instances.length;
+ if (len < 1) return;
+ for (let i = idx; i < len; i++) {
+ const pos =
+ parseInt(instances[i].vm.el!.style["top"], 10) - removedHeight - 16;
+
+ instances[i].vm.component!.props.offset = pos;
+ }
+}
 export default message;

src/lib/message/src/message.ts

@@ -1,5 +1,30 @@
 import type { VNode } from "vue";
 
+export const messageProps = {
+ duration: {
+ type: Number,
+ default: 3000,
+ },
+ id: {
+ type: String,
+ default: "",
+ },
+ offset: {
+ type: Number,
+ default: 100,
+ },
+ zIndex: {
+ type: Number,
+ default: 0,
+ },
+ onClose: {
+ type: Function,
+ required: false,
+ },
+};
+
+export const messageEmits = ["destory"];
+
 type MessageQueueItem = {
  vm: VNode;
 };

src/lib/message/src/message.vue

@@ -3,6 +3,8 @@
  :duration="300"
  leave-active-class="animate__zoomOut"
  enter-active-class="animate__zoomIn"
+ @before-leave="onClose"
+ @after-leave="$emit('destory')"
  >
  <div
  class="jw-message animate__animated"
@@ -16,36 +18,12 @@
 </template>
 
 <script setup lang="ts">
-import {
- ref,
- onMounted,
- computed,
- watch,
- getCurrentInstance,
- nextTick,
-} from "vue";
-const props = defineProps({
- duration: {
- type: Number,
- default: 3000,
- },
- id: {
- type: String,
- default: "",
- },
- offset: {
- type: Number,
- default: 100,
- },
- zIndex: {
- type: Number,
- default: 0,
- },
-});
+import { ref, onMounted, computed } from "vue";
+import { messageProps, messageEmits } from "./message";
+const props = defineProps(messageProps);
+const emits = defineEmits(messageEmits);
 
 const visible = ref(false);
-
-const internalInstance = getCurrentInstance();
 const customStyle = computed(() => ({
  top: `${props.offset}px`,
  zIndex: props.zIndex,
@@ -67,15 +45,6 @@ onMounted(() => {
  startTimer();
  visible.value = true;
 });
-
-watch(visible, () => {
- if (!visible.value) {
- setTimeout(() => {
- const el = internalInstance.vnode.el;
- el.parentNode.removeChild(el);
- }, 300);
- }
-});
 </script>
 <script lang="ts">
 export default {
@@ -102,6 +71,7 @@ export default {
  0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
  transition: color 0.3s var(--jw-bezier), box-shadow 0.3s var(--jw-bezier),
  background-color 0.3s var(--jw-bezier), opacity 0.3s var(--jw-bezier),
- transform 0.3s var(--jw-bezier), margin-bottom 0.3s var(--jw-bezier);
+ transform 0.3s var(--jw-bezier), margin-bottom 0.3s var(--jw-bezier),
+ top 0.3s var(--jw-bezier);
 }
 </style>