当前位置：首页 > 前端教程

elementui消息

2026-01-14 20:02:21前端教程

ElementUI 消息提示

ElementUI 提供了一套消息提示组件，包括 Message、MessageBox 和 Notification，用于展示不同类型的反馈信息。

消息提示（Message）

Message 用于显示全局的轻量级提示，通常用于操作反馈。

基本用法

this.$message('这是一条普通消息');
this.$message.success('操作成功');
this.$message.warning('警告提示');
this.$message.error('错误提示');
this.$message.info('信息提示');

自定义配置

this.$message({
  message: '自定义消息',
  type: 'success',
  duration: 3000,  // 显示时长（毫秒）
  showClose: true,  // 是否显示关闭按钮
  center: true      // 文字居中
});

消息弹框（MessageBox）

MessageBox 用于确认对话框、输入框等交互式提示。

确认框

this.$confirm('确认删除吗？', '提示', {
  confirmButtonText: '确定',
  cancelButtonText: '取消',
  type: 'warning'
}).then(() => {
  // 用户点击确认
}).catch(() => {
  // 用户点击取消
});

输入框

this.$prompt('请输入内容', '提示', {
  inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+/,  // 输入校验正则
  inputErrorMessage: '格式不正确'
}).then(({ value }) => {
  // 用户输入内容
}).catch(() => {
  // 用户取消
});

通知提示（Notification）

Notification 用于右上角弹出通知，适用于系统级消息。

基本用法

this.$notify({
  title: '通知',
  message: '这是一条通知消息',
  type: 'success',
  duration: 4500
});

自定义配置

this.$notify({
  title: '警告',
  message: '请注意操作风险',
  type: 'warning',
  position: 'bottom-right',  // 显示位置
  offset: 50                 // 偏移量
});

全局引入与配置

在 main.js 中全局引入并配置默认参数：

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

Vue.prototype.$message = Message;
Vue.prototype.$confirm = MessageBox.confirm;
Vue.prototype.$prompt = MessageBox.prompt;
Vue.prototype.$notify = Notification;

// 设置默认时长
Message.config({ duration: 2000 });
Notification.config({ duration: 4000 });

注意事项

elementui消息