模态框对象封装

最新推荐文章于 2024-04-30 14:28:57 发布

子扬丨

最新推荐文章于 2024-04-30 14:28:57 发布

阅读量718

点赞数

CC 4.0 BY-SA版权

分类专栏： elementui javascript 文章标签： javascript 前端

本文链接：https://blog.youkuaiyun.com/weixin_42878641/article/details/129163247

javascript 同时被 2 个专栏收录

11 篇文章

订阅专栏

elementui

5 篇文章

订阅专栏

文章展示了如何在Vue项目中创建一个全局插件，用于封装ElementUI的Message、MessageBox、Notification和Loading组件，提供统一的调用接口，如msgError、alert、notify等，简化代码并增强代码复用性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

目录结构

main.js

import plugins from './plugins'
Vue.use(plugins)

index.js

import modal from './modal'

export default {
  install(Vue) {
    /**
     * 同理，可在此配置自己想封装的其他全局模块功能
    */ 
    // 模态框对象
    Vue.prototype.$modal = modal
  }
}

model.js

import { Message, MessageBox, Notification, Loading } from 'element-ui'

let loadingInstance;

export default {
  // 消息提示
  msg(content) {
    Message.info(content)
  },
  // 错误消息
  msgError(content) {
    Message.error(content)
  },
  // 成功消息
  msgSuccess(content) {
    Message.success(content)
  },
  // 警告消息
  msgWarning(content) {
    Message.warning(content)
  },
  // 弹出提示
  alert(content) {
    MessageBox.alert(content, "系统提示")
  },
  // 错误提示
  alertError(content) {
    MessageBox.alert(content, "系统提示", { type: 'error' })
  },
  // 成功提示
  alertSuccess(content) {
    MessageBox.alert(content, "系统提示", { type: 'success' })
  },
  // 警告提示
  alertWarning(content) {
    MessageBox.alert(content, "系统提示", { type: 'warning' })
  },
  // 通知提示
  notify(content) {
    Notification.info(content)
  },
  // 错误通知
  notifyError(content) {
    Notification.error(content);
  },
  // 成功通知
  notifySuccess(content) {
    Notification.success(content)
  },
  // 警告通知
  notifyWarning(content) {
    Notification.warning(content)
  },
  // 确认窗体
  confirm(content) {
    return MessageBox.confirm(content, "系统提示", {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: "warning",
    })
  },
  // 提交内容
  prompt(content) {
    return MessageBox.prompt(content, "系统提示", {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: "warning",
    })
  },
  // 打开遮罩层
  loading(content) {
    loadingInstance = Loading.service({
      lock: true,
      text: content,
      spinner: "el-icon-loading",
      background: "rgba(0, 0, 0, 0.7)",
    })
  },
  // 关闭遮罩层
  closeLoading() {
    loadingInstance.close();
  }
}

使用

// 举例
this.$modal.msgError(“错误提示”)

this.$modal.loading("页面加载文字...")

this.$modal.closeLoading() // 关闭加载状态 

// 二次确认方法
this.$modal.confirm('是否确认删除文件名为"' + name + '"的数据项?').then(() => {
  return delete(id);
}).then(() => {
  this.getList();
  this.$modal.msgSuccess("删除成功");
}).catch(() => {});