From 1b7c0577d9d25b39d67b6dcc27906de5bb0d822a Mon Sep 17 00:00:00 2001
From: xiaoming <1923740402@qq.com>
Date: Thu, 13 Nov 2025 07:54:28 +0800
Subject: [PATCH] =?UTF-8?q?chore:=20`message`=E5=B7=A5=E5=85=B7=E5=87=BD?=
 =?UTF-8?q?=E6=95=B0=E9=80=82=E9=85=8D`ElMessage`=E6=9C=80=E6=96=B0?=
 =?UTF-8?q?=E7=89=88=E6=9C=AC=E7=9A=84`API`=E5=8F=98=E6=9B=B4=E4=BB=A5?=
 =?UTF-8?q?=E5=8F=8A=E8=A1=A5=E5=85=85=E7=9B=B8=E5=85=B3=E7=A4=BA=E4=BE=8B?=
 =?UTF-8?q?=20(#1241)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/utils/message.ts             | 13 ++++++++++++-
 src/views/components/message.vue | 25 +++++++++++++++++++++++++
 2 files changed, 37 insertions(+), 1 deletion(-)

diff --git a/src/utils/message.ts b/src/utils/message.ts
index c45c5d776..2a5b2da97 100644
--- a/src/utils/message.ts
+++ b/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,
diff --git a/src/views/components/message.vue b/src/views/components/message.vue
index 10eb8cced..53f3e2e01 100644
--- a/src/views/components/message.vue
+++ b/src/views/components/message.vue
@@ -199,6 +199,31 @@ defineOptions({
 
     <el-divider />
 
+    <h4 class="mb-4!">
+      控制消息出现的位置，消息可以显示在窗口的顶部(默认) 或其他位置
+    </h4>
+
+    <el-space wrap>
+      <el-button @click="message('顶部中间')"> 顶部中间 </el-button>
+      <el-button @click="message('顶部左侧', { placement: 'top-left' })">
+        顶部左侧
+      </el-button>
+      <el-button @click="message('顶部右侧', { placement: 'top-right' })">
+        顶部右侧
+      </el-button>
+      <el-button @click="message('底部中间', { placement: 'bottom' })">
+        底部中间
+      </el-button>
+      <el-button @click="message('底部左侧', { placement: 'bottom-left' })">
+        底部左侧
+      </el-button>
+      <el-button @click="message('底部右侧', { placement: 'bottom-right' })">
+        底部右侧
+      </el-button>
+    </el-space>
+
+    <el-divider />
+
     <el-button @click="closeAllMessage"> 关闭所有消息提示 </el-button>
   </el-card>
 </template>