vue3 + Element Plus + ts 封装全局的 message、messageBox、notification 方法

本文示例将 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 官方文档的配置项传入你需要的配置，按方法参数格式传入即可

原文地址：https://blog.csdn.net/qq_43551801/article/details/143951585

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！