xiaoxian521
2 years ago
7 changed files with 116 additions and 22 deletions
-
2package.json
-
2public/serverConfig.json
-
14src/style/dark.scss
-
27src/style/element-plus.scss
-
88src/utils/message.ts
-
2src/views/login/index.vue
-
3tsconfig.json
@ -1,32 +1,84 @@ |
|||||
|
import { type VNode } from "vue"; |
||||
|
import { isFunction } from "@pureadmin/utils"; |
||||
import { type MessageHandler, ElMessage } from "element-plus"; |
import { type MessageHandler, ElMessage } from "element-plus"; |
||||
|
|
||||
// 更多配置请看:https://element-plus.org/zh-CN/component/message.html#message-%E9%85%8D%E7%BD%AE%E9%A1%B9
|
|
||||
|
type messageStyle = "el" | "antd"; |
||||
|
type messageTypes = "info" | "success" | "warning" | "error"; |
||||
|
|
||||
type messageTypes = "success" | "info" | "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/index.vue 文件 */ |
||||
|
|
||||
/** |
/** |
||||
* `element-plus` 的 `info` 消息类型 |
|
||||
|
* `Message` 消息提示函数 |
||||
*/ |
*/ |
||||
const message = ( |
const message = ( |
||||
message: string, |
|
||||
type = "info" as messageTypes, |
|
||||
showClose = true, |
|
||||
duration = 2000, |
|
||||
center = false, |
|
||||
grouping = false |
|
||||
|
message: string | VNode | (() => VNode), |
||||
|
params?: MessageParams |
||||
): MessageHandler => { |
): MessageHandler => { |
||||
return ElMessage({ |
|
||||
message, |
|
||||
type, |
|
||||
showClose, |
|
||||
duration, |
|
||||
center, |
|
||||
grouping |
|
||||
}); |
|
||||
|
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) |
||||
|
}); |
||||
|
} |
||||
}; |
}; |
||||
|
|
||||
/** |
/** |
||||
* 关闭 `element-plus` 的所有消息实例 |
|
||||
|
* 关闭所有 `Message` 消息提示函数 |
||||
*/ |
*/ |
||||
const closeAllMessage = (): void => ElMessage.closeAll(); |
const closeAllMessage = (): void => ElMessage.closeAll(); |
||||
|
|
||||
|
Write
Preview
Loading…
Cancel
Save
Reference in new issue