颜值出众且功能完备的消息提示组件el-message

前端

2024-01-22 04:49:37

一、组件介绍

el-message 组件是一个信息提示类组件，常用于系统级别的提醒，比如操作成功、操作失败等。它提供了多种类型的消息提示，包括：

success： 成功提示，一般用于操作成功时的提醒。
info： 信息提示，一般用于提示用户一些重要信息。
warning： 警告提示，一般用于提示用户需要注意某些事情。
error： 错误提示，一般用于提示用户操作失败或出现错误。

el-message 组件还提供了多种自定义选项，比如可以设置消息的持续时间、位置、颜色等，以便更好地满足您的需求。

二、API

el-message 组件提供了丰富的 API，您可以通过这些 API 来控制消息的显示和隐藏，以及设置消息的各种属性。

以下是 el-message 组件的主要 API：

message： 显示一条消息。
close： 关闭一条消息。
success： 显示一条成功消息。
info： 显示一条信息消息。
warning： 显示一条警告消息。
error： 显示一条错误消息。
duration： 设置消息的持续时间。
position： 设置消息的位置。
showClose： 设置是否显示关闭按钮。
customClass： 设置消息的自定义类名。

有关 el-message 组件的更多 API，请参考 Element Plus 官方文档。

三、结合案例

为了帮助您更好地理解 el-message 组件的使用，我们来看一个结合案例。

假设我们有一个登录页面，当用户登录成功后，我们需要提示用户登录成功。我们可以使用 el-message 组件来实现这个功能。

<template>
  <div>
    <el-form ref="loginForm" :model="loginForm" label-width="80px">
      <el-form-item label="用户名">
        <el-input v-model="loginForm.username"></el-input>
      </el-form-item>
      <el-form-item label="密码">
        <el-input type="password" v-model="loginForm.password"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="login">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

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

export default {
  data() {
    return {
      loginForm: {
        username: '',
        password: ''
      }
    }
  },
  methods: {
    login() {
      // 模拟登录请求
      setTimeout(() => {
        ElMessage({
          message: '登录成功',
          type: 'success'
        })
      }, 1000)
    }
  }
}
</script>