本文示例将 Element Plus 中的 ElMessage 消息提示, ElMessageBox 消息弹出框, ElNotification 消息通知 方法统一封装到全局 hooks 文件中方便全局调用
准备：在项目 src 目录中新建 hooks 目录、然后在 hooks 目录中新建 index.ts （如果你没有使用 ts 也可以建 index.js）文件（主要用于将全局的方法放到这个文件中），当然，你可以根据自己的习惯或喜好将示例代码放置到其他地方。
完整代码（ts 版）
// 用于封装一些全局的hook，可以单独导入某些方法使用，也可以统一导入 hook 对象，从 hook 对象中 . 具体的方法
import { ElMessage, ElMessageBox, ElNotification } from 'element-plus'
/**
* 封装一个全局的 message 方法，用于显示消息提示
* @param message 消息内容
* @param type 消息类型，默认为 success
* @param [options] 消息选项
*/
export const message = (
message: string,
type: 'success' | 'warning' | 'info' | 'error' = 'success',
options: any = {}
) => {
ElMessage({
message,
type,
...options
})
}
/**
* 封装一个全局的 confirm 方法，用于显示确认对话框
* @param message 对话框内容
* @param title 对话框标题，默认为 '提示'
* @param [options] 对话框选项
* @return Promise<boolean>
*/
export const confirm = (message: string, title: string = '提示', options: any = {}) => {
if (Object.keys(options).length === 0) {
options = {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}
}
return new Promise((resolve, reject) => {
ElMessageBox.confirm(message, title, options)
.then(() => {
resolve(true)
})
.catch(() => {
reject(false)
})
})
}
/**
* 封装一个全局的 notification 方法，用于显示通知
* @param message 通知内容
* @param title 通知标题，默认为 '提示'
* @param [options] 通知选项
*/
export const notification = (message: string, title: string = '提示', options: any = {}) => {
ElNotification({
title,
message,
...options
})
}
/**
* 统一导出一个 hook 方法对象，包含所有 hook 方法
*/
export default {
message,
confirm,
notification
}
注：这是完整代码，如果你的项目也是 vue3 + Element Plus + ts 那么你可以直接全部复制放到你创建的 .ts 文件中，然后在页面中导入使用它们。
使用示例
导入（注意核实你的文件路径）
import hooks from '@/hooks/index'使用示例
hooks.message('操作成功') // 成功弹出
hooks.notification('恭喜你学会了使用全局通知组件', '操作成功', { type: 'success' }) // 成功弹出
hooks.confirm('确认要删除吗？').then((res) => console.log(res)) // 成功弹出注：使用时也可以根据 Element Plus 官方文档的配置项传入你需要的配置，按方法参数格式传入即可
