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({ +

+ 控制消息出现的位置,消息可以显示在窗口的顶部(默认) 或其他位置 +

+ + + 顶部中间 + + 顶部左侧 + + + 顶部右侧 + + + 底部中间 + + + 底部左侧 + + + 底部右侧 + + + + + 关闭所有消息提示