ElMessage详解

ElMessage 是 Element Plus 框架中的一个消息提示组件，用于在页面顶部显示短暂的消息提示。它可以用于通知用户操作的结果或其他重要信息。

一。 ElMessage 方法详解

1. message:

   • 类型: Function

   • 用途: 创建一个消息提示。

   • 参数:

     • options (string | Object): 消息内容或配置对象。

   • 示例:

     ElMessage('这是一条消息');
     

2. success:

   • 类型: Function

   • 用途: 创建一个成功的消息提示。

   • 参数:

     • options (string | Object): 消息内容或配置对象。

   • 示例:

     ElMessage.success('操作成功');
     

3. warning:

   • 类型: Function

   • 用途: 创建一个警告的消息提示。

   • 参数:

     • options (string | Object): 消息内容或配置对象。

   • 示例:

     ElMessage.warning('操作警告');
     

4. error:

   • 类型: Function

   • 用途: 创建一个错误的消息提示。

   • 参数:

     • options (string | Object): 消息内容或配置对象。

   • 示例:

     ElMessage.error('操作失败');
     

5. info:

   • 类型: Function

   • 用途: 创建一个普通的消息提示。

   • 参数:

     • options (string | Object): 消息内容或配置对象。

   • 示例:

     ElMessage.info('操作信息');
     

二。 ElMessage 配置对象属性详解

1. message:

   • 类型: String
   • 用途: 消息内容。

2. type:

   • 类型: String
   • 用途: 消息类型，可选值为 success、warning、error、info。
   • 默认值: info

3. center:

   • 类型: Boolean
   • 用途: 是否居中显示消息。
   • 默认值: false

4. duration:

   • 类型: Number
   • 用途: 消息显示的时间，单位为毫秒。
   • 默认值: 3000

5. showClose:

   • 类型: Boolean
   • 用途: 是否显示关闭按钮。
   • 默认值: false

6. onClose:

   • 类型: Function
   • 用途: 消息关闭时的回调函数。

7. offset:

   • 类型: Number
   • 用途: 消息距离顶部的距离。
   • 默认值: 20

8. customClass:

   • 类型: String
   • 用途: 自定义类名。

9. round:

   • 类型: Boolean
   • 用途: 是否圆角。
   • 默认值: false

三。示例代码

<template>
  <div>
    <h2>Message 示例</h2>

    <!-- 基本用法 -->
    <el-button type="primary" @click="showMessage">显示消息</el-button>

    <!-- 成功消息 -->
    <el-button type="success" @click="showSuccessMessage">显示成功消息</el-button>

    <!-- 警告消息 -->
    <el-button type="warning" @click="showWarningMessage">显示警告消息</el-button>

    <!-- 错误消息 -->
    <el-button type="danger" @click="showErrorMessage">显示错误消息</el-button>

    <!-- 自定义消息 -->
    <el-button type="info" @click="showCustomMessage">显示自定义消息</el-button>
  </div>
</template>

<script setup>
import { ElMessage } from 'element-plus'

const showMessage = () => {
  ElMessage('这是一条消息')
}

const showSuccessMessage = () => {
  ElMessage.success('操作成功')
}

const showWarningMessage = () => {
  ElMessage.warning('操作警告')
}

const showErrorMessage = () => {
  ElMessage.error('操作失败')
}

const showCustomMessage = () => {
  ElMessage({
    message: '这是一条自定义消息',
    type: 'info',
    center: true,
    duration: 5000,
    showClose: true,
    onClose: () => {
      console.log('消息已关闭')
    },
    offset: 50,
    customClass: 'custom-message',
    round: true
  })
}
</script>

四。代码解释

1. 基本用法:

   • 使用 ElMessage 函数显示一条普通的消息。

   • const showMessage = () => {
       ElMessage('这是一条消息')
     }
     

2. 成功消息:

   • 使用 ElMessage.success 函数显示一条成功的消息。

   • const showSuccessMessage = () => {
       ElMessage.success('操作成功')
     }
     

3. 警告消息:

   • 使用 ElMessage.warning 函数显示一条警告的消息。

   • const showWarningMessage = () => {
       ElMessage.warning('操作警告')
     }
     

4. 错误消息:

   • 使用 ElMessage.error 函数显示一条错误的消息。

   • const showErrorMessage = () => {
       ElMessage.error('操作失败')
     }
     

5. 自定义消息:

   • 使用 ElMessage 函数并传递配置对象来显示一条自定义的消息。

   • const showCustomMessage = () => {
       ElMessage({
         message: '这是一条自定义消息',
         type: 'info',
         center: true,
         duration: 5000,
         showClose: true,
         onClose: () => {
           console.log('消息已关闭')
         },
         offset: 50,
         customClass: 'custom-message',
         round: true
       })
     }