以下是关于 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('删除失败');}
};
