ElMessage

最新推荐文章于 2025-04-22 14:05:50 发布

杨-羊羊羊

最新推荐文章于 2025-04-22 14:05:50 发布

阅读量234

点赞数 3

文章标签：前端

本文链接：https://blog.csdn.net/m0_74416054/article/details/147192270

版权

以下是关于 ElMessage 的详细说明和使用方法：

什么是 `ElMessage`

ElMessage 是 Element Plus 提供的一个全局消息提示组件，用于在页面上显示短暂的消息提示。它可以用于显示成功、警告、错误等不同类型的消息。

基本用法

1. 引入 `ElMessage`

在使用 ElMessage 之前，需要先引入它：

import { ElMessage } from 'element-plus';

2. 显示成功消息

ElMessage.success('操作成功');

3. 显示警告消息

ElMessage.warning('这是一个警告消息');

4. 显示错误消息

ElMessage.error('操作失败');

5. 显示信息消息

ElMessage.info('这是一条信息消息');

自定义配置

1. 设置消息显示时间

默认情况下，消息会在 3 秒后自动关闭。可以通过 duration 参数自定义显示时间（单位为毫秒）：

ElMessage({
  message: '消息将在 5 秒后关闭',
  type: 'info',
  duration: 5000
});

2. 禁止自动关闭

如果需要手动关闭消息，可以将 duration 设置为 0：

const message = ElMessage({
  message: '这是一条不会自动关闭的消息',
  type: 'warning',
  duration: 0
});

// 手动关闭消息
setTimeout(() => {
  message.close();
}, 5000);

3. 添加关闭回调

可以在消息关闭时执行回调函数：

ElMessage({
  message: '消息将在关闭时触发回调',
  type: 'success',
  onClose: () => {
    console.log('消息已关闭');
  }
});

使用场景

1. 表单提交成功或失败

在表单提交后，根据结果显示成功或错误消息：

const submitForm = async () => {
  try {
    await form.value.validate();
    await submitFormData();
    ElMessage.success('提交成功');
  } catch (error) {
    ElMessage.error('提交失败，请稍后再试');
  }
};

2. 删除操作确认

在删除操作后，显示成功或错误消息：

const deleteItem = async (id) => {
  try {
    await ElMessageBox.confirm('确定要删除该条目吗？', '提示', {
      type: 'warning',
      confirmButtonText: '确认',
      cancelButtonText: '取消'
    });
    await deleteApi(id);
    ElMessage.success('删除成功');
  } catch (error) {
    ElMessage.error('删除失败');
  }
};