Element-UI 阅读理解（3） - 全局命令式组件 Message

2023-10-21 22:51:20

简介

Element UI 的 Message 组件是一个全局命令式组件，常用于主动操作后的反馈提示。它提供了一种简单而灵活的方式来显示各种类型的消息，包括成功、警告、错误等。Message 组件可以在任何 Vue 组件中使用，并且可以通过配置和自定义来满足不同的需求。

用法

1. 安装

首先，您需要安装 Element UI 和 Vue.js。可以通过以下命令安装：

npm install element-ui vue

2. 导入

在您的 Vue 组件中，导入 Message 组件：

import { Message } from 'element-ui';

3. 使用

要使用 Message 组件，您可以在任何地方调用 this.$message() 方法。例如：

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

这将在页面上显示一条成功的消息提示。

4. 配置

您可以通过配置 Message 组件来改变其外观和行为。例如，您可以配置消息的类型、持续时间、位置等。

this.$message({
  message: '操作成功',
  type: 'success',
  duration: 5000,
  onClose: () => {
    console.log('消息已关闭');
  }
});

5. 自定义

您还可以自定义 Message 组件的外观和行为。例如，您可以自定义消息的样式、动画效果等。

this.$message({
  message: '操作成功',
  type: 'success',
  customClass: 'my-custom-class'
});

示例

以下是一些 Message 组件的示例代码：

// 显示一条成功的消息提示
this.$message({
  message: '操作成功',
  type: 'success'
});

// 显示一条警告的消息提示
this.$message({
  message: '操作失败',
  type: 'warning'
});

// 显示一条错误的消息提示
this.$message({
  message: '系统错误',
  type: 'error'
});

// 显示一条自定义的消息提示
this.$message({
  message: '自定义消息',
  type: 'info',
  customClass: 'my-custom-class'
});

// 显示一条带关闭按钮的消息提示
this.$message({
  message: '操作成功',
  type: 'success',
  showClose: true
});

// 显示一条持续 5 秒的消息提示
this.$message({
  message: '操作成功',
  type: 'success',
  duration: 5000
});

// 显示一条在关闭时执行回调函数的消息提示
this.$message({
  message: '操作成功',
  type: 'success',
  onClose: () => {
    console.log('消息已关闭');
  }
});