Vue自定义插件：简易Element UI Message/MessageBox封装实例

本文档提供了一个基于Vue CLI 3和TypeScript编写的自定义插件示例，专注于实现一个类似于Element UI的Message和MessageBox功能的简化版本，特别是针对Toast提示。通过这种方式，开发者可以将常见的页面交互逻辑封装成可复用的组件，避免在每个`.vue`文件中重复编写相似代码。 首先，作者介绍了一个名为`toast`的自定义组件，该组件使用了Vue的`ref`属性来引用DOM元素，以便在组件内部进行操作。`<template>`部分展示了基础的HTML结构，仅包含一个用于显示消息的`div`，类名为`toastMessageBox`。 在`<script>`部分，作者使用了`@Component`装饰器来声明组件，并且引入了Vue和Vue Property Decorator库。`toast`组件继承自Vue，包含了三个主要属性：`message`用于存储要显示的消息文本，`type`用于指定提示类型（如成功或错误），以及两个方法`showToast`和`hideToast`来控制Toast的显示和隐藏。 `mounted()`生命周期钩子在组件挂载后被调用，根据`type`属性设置提示框的样式。例如，如果`type`是`success`，则背景色设为浅绿色，边框色设为浅绿色，文字色设为深绿；如果是`error`，则背景色设为浅粉色，边框色和文字色设为深红色。 `showToast`方法负责将提示框定位到屏幕上方并增加透明度，而`hideToast`方法则将提示框下移并渐隐。这样，开发者只需在需要时调用这些方法，即可动态展示和隐藏Toast提示，实现了与Element UI Message类似的功能，但更加轻量级和灵活。 这篇文章提供了如何在Vue应用中创建和使用自定义插件，以提升代码复用性和模块化程度，同时保持与Element UI类似的用户体验。对于希望学习如何在Vue项目中封装组件并且理解其工作原理的开发者来说，这是一个很好的实例。