基于vue写一个全局Message组件的实现

在Vue.js中，全局组件是一种可以无需在每个页面或组件中显式引入和注册即可使用的组件。本篇文章将深入探讨如何基于Vue实现一个全局Message组件，这个组件类似于Element UI中的`this.$message()`功能，方便地展示全局消息提示。 我们需要创建一个名为`BlogMessage.vue`的组件文件。这个组件包含模板、脚本（使用TypeScript编写）和样式。在模板部分，我们定义了一个`<transition>`组件来处理消息显示和消失时的过渡效果。`<div class="message-wrap">`包裹着消息内容，根据`type`属性改变背景颜色，以显示不同类型的提示（如成功或错误）。`v-if="visible"`确保只有当组件可见时才会渲染。 在脚本部分，我们使用装饰器来声明Vue组件的属性和方法。`content`用于存储消息内容，`visible`控制组件的显示和隐藏，`type`用于设置消息类型，初始默认为"info"。`startTimer`方法设置了3秒后自动关闭消息的定时器，该方法在组件挂载(`mounted`)后自动调用。 接下来，我们来看样式部分。`.message-wrap`定义了消息框的基本样式，包括位置、尺寸、颜色等。`.error`和`.success`类分别对应错误和成功的样式。`slide`过渡类定义了消息出现和消失的动画效果。 然后，在`index.js`中，我们导入Vue和`BlogMessage.vue`组件。使用`Vue.extend(BlogMessage)`创建一个组件构造器，这不是一个实际的实例，而是用来创建实例的对象。接下来，我们定义一个名为`Message`的对象，其中包含一个`install`方法。这个方法接收Vue实例以及可选的`type`和`duration`参数，用于自定义消息类型和持续时间。 在`install`方法内部，我们首先检查传入的`options`是否为空，如果为空，则初始化为一个包含默认`content`的对象。如果`options`是一个字符串或数字，那么我们将其视为`content`，并可以额外指定`type`。接着，我们创建一个新的`MessageBox`实例，并使用Vue的`$mount()`方法挂载到文档的某个位置（通常是`body`标签），这样消息组件就会出现在页面上。我们设置定时器以在指定的`duration`后移除消息。 通过这种方式，我们创建了一个全局的Message组件，可以方便地在Vue应用的任何地方使用，只需调用`Message.install(Vue实例, {content: '消息内容', type: '类型', duration: 持续时间})`即可。这种方法提高了代码的复用性和开发效率，使得全局消息提示的使用更加便捷。