对比vue2与vue3中element UI Message的消息提示组件特性, 详细分析其属性、事件与方法的使用方式

在 Vue 2 版本中，默认情况下我们会常见地采用 Element UI 提供的 this.$message 方法来实现消息提示功能，并不会将其作为独立组件直接嵌入到模板代码中。然而，在 Element Plus 版本的 Vue 3 中尽管仍沿用 this.$message 方法这一传统做法但官方文档更倾向于推荐通过调用 ElMessage 服务或者相关组件（如果支持的话）来完成类似功能。

Vue 2 + Element UI

在 Vue 2 中的消息通知不以组件形式存在，在这种机制下消息通知是通过 Vue 的原型链机制实现的。

方法 :

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

MessageOptions 可能包含以下属性：

• type: 表示消息种类（如 success、warning、info 或 error）。
  • message: 表示的内容。
  • duration: 显示时长（默认为 2000 毫秒后自动消失）。
  • center: 居中显示与否（默认为 false）。
  • showClose: 是否显示关闭按钮（默认为 false）。
  • onClose