【区分vue2和vue3下的element UI Message 消息提示组件,分别详细介绍属性,事件,方法如何使用,并举例】

在 Vue 2 中,我们通常使用 Element UI 的 this.$message 方法来显示消息提示,而不是作为一个组件直接在模板中使用。然而,在 Vue 3 的 Element Plus 中,虽然 this.$message 的使用方式仍然保留,但官方文档可能更倾向于使用 ElMessage 服务或组件(如果提供的话)。

Vue 2 + Element UI

在 Vue 2 中,Element UI 的 Message 消息提示不是作为一个组件提供的,而是通过 Vue 的原型链上的 $message 方法来调用的。

方法:

  • this.$message(message: string [options: MessageOptions]): 显示消息提示。

MessageOptions 可能包含以下属性:

  • type: 消息类型,如 successwarninginfoerror
  • message: 消息内容。
  • duration: 显示时间,单位为毫秒,默认 2000 毫秒后消失。
  • center: 文字是否居中,布尔值,默认为 false
  • showClose: 是否显示关闭按钮,布尔值,默认为 false
  • onClose: 关闭时的回调函数,参数为被关闭的 message 实例。

示例:

vue 复制代码
<template>
  <el-button @click="showMessage">显示消息</el-button>
</template>

<script>
export default {
  methods: {
    showMessage() {
      this.$message({
        message: '这是一条消息提示',
        type: 'success',
        duration: 2000
      });
    }
  }
};
</script>

Vue 3 + Element Plus

在 Vue 3 的 Element Plus 中,this.$message 的使用方式应该与 Vue 2 中的 Element UI 类似,但你也可以通过 ElMessage 服务来调用。

方法:

  • ElMessage(options: MessageOptions): 显示消息提示。

MessageOptions 与 Vue 2 中的 Element UI 类似,但可能有一些细微的差别或新增的属性。

示例:

vue 复制代码
<template>
  <el-button @click="showMessage">显示消息</el-button>
</template>

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

const showMessage = () => {
  ElMessage({
    message: '这是一条消息提示',
    type: 'success',
    duration: 2000
  });
};
</script>

请注意,由于 Element Plus 可能会更新其 API,因此建议查阅最新的 Element Plus 官方文档以获取最准确的信息和示例。

在 Vue 3 中,由于 Composition API 的引入,你可能更倾向于使用 setup 函数和 import 语句来直接调用 ElMessage 服务,而不是通过 this.$message。不过,如果你使用的是 Options API 或通过其他方式配置了 Vue 的原型链,this.$message 应该仍然可用。

相关推荐
一直在学习的小白~5 小时前
node_modules 明明写进 .gitignore,却还是被 push/commit 的情况
前端·javascript·vue.js
nightunderblackcat6 小时前
新手向:从零理解LTP中文文本处理
前端·javascript·easyui
User:你的影子6 小时前
WPF ItemsControl 绑定
开发语言·前端·javascript
小程序设计6 小时前
【springboot+vue】高校迎新平台管理系统(源码+文档+调试+基础修改+答疑)
vue.js·spring boot·后端
会有钱的-_-6 小时前
基于webpack的场景解决
前端·vue.js·webpack·安全性测试
知识分享小能手7 小时前
React学习教程,从入门到精通,React 构造函数(Constructor)完整语法知识点与案例详解(16)
前端·javascript·学习·react.js·架构·前端框架·vue
召摇7 小时前
NodeBB 深度解析:现代论坛系统的架构设计与实践指南
前端·javascript
Abadbeginning7 小时前
FastSoyAdmin centos7云服务器+宝塔部署
vue.js·后端·python
哆啦A梦15887 小时前
uniapp分包实现
前端·vue.js·uni-app·vue3
yuanpan7 小时前
认识跨平台UI框架Flutter和MAUI区别,如何选。
flutter·ui·maui