elementui message

Element UI Message 组件使用指南

Element UI 的 Message 组件用于显示全局提示信息，常用于操作反馈、通知提醒等场景。以下为详细使用方法：

基础用法

引入 Message 组件后可直接调用：

this.$message('这是一条普通消息');

支持设置消息类型：

this.$message.success('成功消息');
this.$message.warning('警告消息');
this.$message.error('错误消息');
this.$message.info('提示消息');

自定义配置

通过对象形式配置更多参数：

this.$message({
  message: '自定义内容',
  type: 'success',
  duration: 3000,  // 显示时长(ms)
  showClose: true, // 显示关闭按钮
  center: true     // 文字居中
});

全局方法

在 Vue 原型上挂载后可在任意组件调用：

Vue.prototype.$message = Message;

手动关闭

调用返回的方法可手动关闭消息：

const msg = this.$message('可关闭消息');
setTimeout(() => msg.close(), 1000);

注意事项

• 同一时间只会显示一个 Message 实例
• 默认自动关闭时间为 3000 毫秒
• 需要单独引入样式文件 import 'element-ui/lib/theme-chalk/message.css'