elementui消息

elementui消息提示

Element UI 提供了一套消息提示组件，包括 Message、MessageBox 和 Notification，用于在用户操作后展示反馈信息。

Message 组件

用于显示简单的全局提示消息，通常用于操作成功或失败的反馈。

this.$message({
  message: '操作成功',
  type: 'success'
});

type 可选值包括 success、warning、info、error。

MessageBox 组件

用于显示确认对话框或输入框，常用于删除确认等场景。

this.$confirm('确定删除吗？', '提示', {
  confirmButtonText: '确定',
  cancelButtonText: '取消',
  type: 'warning'
}).then(() => {
  this.$message({
    type: 'success',
    message: '删除成功!'
  });
}).catch(() => {
  this.$message({
    type: 'info',
    message: '已取消删除'
  });
});

Notification 组件

用于显示右上角的全局通知，比 Message 更丰富，可以包含标题和自定义内容。

this.$notify({
  title: '成功',
  message: '这是一条成功的提示消息',
  type: 'success'
});

自定义配置

可以设置 duration 控制显示时间（毫秒），默认 3000。

this.$message({
  message: '自定义持续时间',
  type: 'success',
  duration: 5000
});

全局方法

在 Vue 原型上挂载了这些方法，可以在任何组件内通过 this.$message 调用。

按需引入

如果只需要部分组件，可以通过插件方式单独引入：

import { Message } from 'element-ui';
Vue.prototype.$message = Message;

以上方法提供了灵活的消息提示方案，适用于不同交互场景。