chore: message工具函数适配ElMessage最新版本的API变更以及补充相关示例 (#1241)

src/utils/message.ts

@@ -4,6 +4,13 @@ import { type MessageHandler, ElMessage } from "element-plus";
 
 type messageStyle = "el" | "antd";
 type messageTypes = "info" | "success" | "warning" | "error";
+type messagePlacement =
+  | "top"
+  | "top-left"
+  | "top-right"
+  | "bottom"
+  | "bottom-left"
+  | "bottom-right";
 
 interface MessageParams {
   /** 消息类型，可选 `info` 、`success` 、`warning` 、`error` ，默认 `info` */
@@ -20,8 +27,10 @@ interface MessageParams {
   duration?: number;
   /** 是否显示关闭按钮，默认值 `false` */
   showClose?: boolean;
-  /** `Message` 距离窗口顶部的偏移量，默认 `16` */
+  /** `Message` 消息距离窗口边缘的偏移量，默认 `16` */
   offset?: number;
+  /** `Message` 消息放置位置，默认 `top` */
+  placement?: messagePlacement;
   /** 设置组件的根元素，默认 `document.body` */
   appendTo?: string | HTMLElement;
   /** 合并内容相同的消息，不支持 `VNode` 类型的消息，默认值 `false` */
@@ -56,6 +65,7 @@ const message = (
       duration = 2000,
       showClose = false,
       offset = 16,
+      placement = "top",
       appendTo = document.body,
       grouping = false,
       repeatNum = 1,
@@ -71,6 +81,7 @@ const message = (
       duration,
       showClose,
       offset,
+      placement,
       appendTo,
       grouping,
       repeatNum,