fix: 修改Message的基础使用

Author: coderyjw

src/lib/index.ts

@@ -82,7 +82,6 @@ const components = [
  JwSwitch,
 
  JwAlert,
- JwMessage,
  JwDialog,
 
  JwAffix,

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

@@ -1,11 +1,15 @@
-import { createVNode, render, ref, VNode } from "vue";
+import { createVNode, render, ref, VNode, isVNode } from "vue";
 import type { MessageQueue } from "./message";
 import MessageConstructor from "./message.vue";
 let seed = 1;
 const zIndex = ref(2000);
 const instances: MessageQueue = [];
 
 const message = function (options = {}) {
+ if (typeof options === "string" || isVNode(options)) {
+ options = { message: options };
+ }
+
  let verticalOffset = 20;
  instances.forEach(({ vm }) => {
  verticalOffset += (vm.el?.offsetHeight || 0) + 16;
@@ -21,29 +25,42 @@ const message = function (options = {}) {
  onClose: () => {
  close(id, userOnClose);
  },
- };
+ } as any;
 
  let appendTo: HTMLElement | null = document.body;
+ if (options.appendTo instanceof HTMLElement) {
+ appendTo = options.appendTo;
+ } else if (typeof options.appendTo === "string") {
+ appendTo = document.querySelector(options.appendTo);
+ }
+ // should fallback to default value with a warning
+ if (!(appendTo instanceof HTMLElement)) {
+ throw new Error(
+ "JwMessage the appendTo option is not an HTMLElement. Falling back to document.body."
+ );
+ appendTo = document.body;
+ }
 
  const container = document.createElement("div");
  container.className = `container_${id}`;
- const vm = createVNode(MessageConstructor, props, null);
 
- // clean message element preventing mem leak
+ const message = props.message;
+ const vm = createVNode(
+ MessageConstructor,
+ props,
+ isVNode(props.message) ? { default: () => message } : null
+ );
+ // 清除消息元素以防止内存泄漏
  vm.props!.onDestroy = () => {
  render(null, container);
- // since the element is destroy, then the VNode should be collected by GC as well
- // we do not want cause any mem leak because we have returned vm as a reference to users
- // so that we manually set it to false.
  };
 
  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.
+ // 不是直接调用 onClose 函数，而是设置这个值，这样我们就可以拥有完整的生命周期
  close: () => ((vm.component!.proxy as any).visible = false),
  };
 };

src/lib/message/src/message.ts

@@ -1,5 +1,7 @@
 import type { VNode } from "vue";
 
+export const messageTypes = ["success", "info", "warning", "error"] as const;
+
 export const messageProps = {
  duration: {
  type: Number,
@@ -21,6 +23,15 @@ export const messageProps = {
  type: Function,
  required: false,
  },
+ type: {
+ type: String,
+ values: messageTypes,
+ default: "info",
+ },
+ message: {
+ type: [String, Object],
+ default: "",
+ },
 };
 
 export const messageEmits = ["destory"];

src/lib/message/src/message.vue

@@ -12,14 +12,53 @@
  :style="customStyle"
  :id="id"
  >
- 1 + 1 = ?
+ <jw-icon
+ class="jw-message-icon"
+ :size="22"
+ v-if="type === 'info'"
+ color="#3f7ee8"
+ >
+ <Info24Filled />
+ </jw-icon>
+ <jw-icon
+ class="jw-message-icon"
+ :size="22"
+ v-if="type === 'success'"
+ color="#4b9e5f"
+ >
+ <IosCheckmarkCircle />
+ </jw-icon>
+ <jw-icon
+ class="jw-message-icon"
+ :size="22"
+ v-if="type === 'warning'"
+ color="#e4a341"
+ >
+ <WarningFilled />
+ </jw-icon>
+ <jw-icon
+ class="jw-message-icon"
+ :size="22"
+ v-if="type === 'error'"
+ color="#bf3f53"
+ >
+ <CloseCircle />
+ </jw-icon>
+ <slot>
+ {{ message }}
+ </slot>
  </div>
  </transition>
 </template>
 
 <script setup lang="ts">
 import { ref, onMounted, computed } from "vue";
 import { messageProps, messageEmits } from "./message";
+import JwIcon from "@/lib/icon/index.vue";
+import { Info24Filled } from "@vicons/fluent";
+import { IosCheckmarkCircle } from "@vicons/ionicons4";
+import { WarningFilled } from "@vicons/carbon";
+import { CloseCircle } from "@vicons/ionicons5";
 const props = defineProps(messageProps);
 const emits = defineEmits(messageEmits);
 
@@ -73,5 +112,9 @@ export default {
  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),
  top 0.3s var(--jw-bezier);
+
+ & .jw-message-icon {
+ margin-right: 10px;
+ }
 }
 </style>

src/views/doc/message/MessagePreview1.preview.vue

@@ -1,16 +1,23 @@
 <preview>基础使用</preview>
 <template>
  <jw-button @click="open">Show Message</jw-button>
+ <jw-button @click="openVn">Vnode</jw-button>
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, h } from "vue";
 import JwMessage from "@/lib/message/index.ts";
 
 const open = () => {
- JwMessage();
+ JwMessage("This is a Message");
 };
-const show = ref(false);
-</script>
 
-<style scoped></style>
+const openVn = () => {
+ JwMessage({
+ message: h("p", null, [
+ h("span", null, "Message can be "),
+ h("i", { style: "color: teal" }, "VNode"),
+ ]),
+ });
+};
+</script>

src/views/doc/message/index.vue

@@ -9,8 +9,14 @@
 </template>
 
 <script setup lang="ts">
-import Preview from "@/components/Preview";
+import Preview from "@/components/Preview.vue";
 import MessagePreview1 from "./MessagePreview1.preview.vue";
 </script>
 
-<style scoped></style>
+<style lang="scss">
+.message-doc-wrapper {
+ .jw-button {
+ margin-right: 8px;
+ }
+}
+</style>