Merge branch 'main' into pages

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,

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>