86 lines
2.5 KiB
TypeScript
86 lines
2.5 KiB
TypeScript
import type { VNode } from "vue";
|
|
import { isFunction } from "@pureadmin/utils";
|
|
import { type MessageHandler, ElMessage } from "element-plus";
|
|
|
|
type messageStyle = "el" | "antd";
|
|
type messageTypes = "info" | "success" | "warning" | "error";
|
|
|
|
interface MessageParams {
|
|
/** 消息类型，可选 `info` 、`success` 、`warning` 、`error` ，默认 `info` */
|
|
type?: messageTypes;
|
|
/** 自定义图标，该属性会覆盖 `type` 的图标 */
|
|
icon?: any;
|
|
/** 是否将 `message` 属性作为 `HTML` 片段处理，默认 `false` */
|
|
dangerouslyUseHTMLString?: boolean;
|
|
/** 消息风格，可选 `el` 、`antd` ，默认 `antd` */
|
|
customClass?: messageStyle;
|
|
/** 显示时间，单位为毫秒。设为 `0` 则不会自动关闭，`element-plus` 默认是 `3000` ，平台改成默认 `2000` */
|
|
duration?: number;
|
|
/** 是否显示关闭按钮，默认值 `false` */
|
|
showClose?: boolean;
|
|
/** 文字是否居中，默认值 `false` */
|
|
center?: boolean;
|
|
/** `Message` 距离窗口顶部的偏移量，默认 `20` */
|
|
offset?: number;
|
|
/** 设置组件的根元素，默认 `document.body` */
|
|
appendTo?: string | HTMLElement;
|
|
/** 合并内容相同的消息，不支持 `VNode` 类型的消息，默认值 `false` */
|
|
grouping?: boolean;
|
|
/** 关闭时的回调函数, 参数为被关闭的 `message` 实例 */
|
|
onClose?: Function | null;
|
|
}
|
|
|
|
/** 用法非常简单，参考 src/views/components/message/list.vue 文件 */
|
|
|
|
/**
|
|
* `Message` 消息提示函数
|
|
*/
|
|
const message = (
|
|
message: string | VNode | (() => VNode),
|
|
params?: MessageParams
|
|
): MessageHandler => {
|
|
if (!params) {
|
|
return ElMessage({
|
|
message,
|
|
customClass: "pure-message"
|
|
});
|
|
} else {
|
|
const {
|
|
icon,
|
|
type = "info",
|
|
dangerouslyUseHTMLString = false,
|
|
customClass = "antd",
|
|
duration = 2000,
|
|
showClose = false,
|
|
center = false,
|
|
offset = 20,
|
|
appendTo = document.body,
|
|
grouping = false,
|
|
onClose
|
|
} = params;
|
|
|
|
return ElMessage({
|
|
message,
|
|
type,
|
|
icon,
|
|
dangerouslyUseHTMLString,
|
|
duration,
|
|
showClose,
|
|
center,
|
|
offset,
|
|
appendTo,
|
|
grouping,
|
|
// 全局搜 pure-message 即可知道该类的样式位置
|
|
customClass: customClass === "antd" ? "pure-message" : "",
|
|
onClose: () => (isFunction(onClose) ? onClose() : null)
|
|
});
|
|
}
|
|
};
|
|
|
|
/**
|
|
* 关闭所有 `Message` 消息提示函数
|
|
*/
|
|
const closeAllMessage = (): void => ElMessage.closeAll();
|
|
|
|
export { message, closeAllMessage };
|