• 【区分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 3 + Element Plus

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

    方法:

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

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

    示例:

    
    
    
    

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

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

  • 相关阅读:
    OC-编译错误
    Util应用框架 UI 开发快速入门
    Pytorch 实战 LESSON 4 张量的线性代数运算
    【CNN基础】转置卷积学习笔记
    c语言编程题经典100例
    win10录音机入门指南,让你的录音更轻松
    2022-2028全球监控光电二极管(MPD)行业调研及趋势分析报告
    vue3: 1.如何利用 effectScope 自己实现一个青铜版pinia 一 state篇
    手把手带你搭建个人博客系统(二)
    Unity Job System详解(2)——如何将业务逻辑Job化
  • 原文地址:https://blog.csdn.net/xiejunlan/article/details/139976322