vue项目element-ui消息提示框及确认弹框封装

最新推荐文章于 2025-09-11 04:14:22 发布

原创最新推荐文章于 2025-09-11 04:14:22 发布 · 4.3k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue #python #java #封装 #linux

该博客介绍了如何在Vue项目中封装Element-UI的消息提示框和确认弹框，并提供了在页面中引用和使用的示例。handleConfirm函数用于创建确认弹框，handleAlert则用于显示消息提示。在页面的关闭和删除操作中，这些封装的函数被用来增强用户体验。

记一下element-ui消息提示框及确认弹框的封装

utils下新建封装文件
页面vue文件中引用
示例效果

# utils下新建封装文件

src/utils/confirm.js

import { MessageBox, Message } from "element-ui";

/**
 * @author 封装 element-ui 弹框
 * @param text
 * @param type
 * @returns {Promise}
 */
export function handleConfirm(text = "确定执行此操作吗？", type = "danger") {
  return MessageBox.confirm(text, "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: type
  });
}

/**
 * @author 封装 element-ui 消息提示
 * @param text
 * @param type
 * @returns {Promise}
 */
export function handleAlert(text = "操作成功", type = "success") {
  return Message({
    showClose: true,
    message: text,
    type: type
  });
}

# 页面vue文件中引用

import { handleConfirm, handleAlert } from '@/utils/confirm'
export default {
  data() {
    return {
      ...
    };
  },
  methods: {
    ...
    handleClose(formName) {
      handleConfirm('系统将不会保存您所做的更改，确定要离开吗？').then(res => {
        ...
      }).catch(err => { 
        console.log('err', err)
      })
    },
    delConfirm(formName) {
      ...
      handleAlert('删除成功')
      ...
    }
  },
  ...
}