如何仿照Element-ui轻松实现简易的$message方法？

本文共计1351个文字，预计阅读时间需要6分钟。

前言：在需要向用户进行提示时，有时会遇到这种场景：使用模式框提示过于僵硬，使用toast提示又显得过于轻浮。此时，可以选择使用页面顶部下滑的消息提示。

文本内容：选择使用页面顶部下滑的消息提示，以实现类似element-ui的提示效果。

前言

在需要对用户进行提示时，有时会遇到这种场景：使用模态框提示太过硬核，使用toast提示又太轻了，这时候可以选择使用页面顶部滑下的消息提示。本文仿照element-ui的实现一个类似$message的方法。

思路梳理

首先我们来看下element-ui中消息提示的效果是怎么样的，找些思路。

从图中我们可以看消息提示是可以同时显示多条的，并且定位看起来都是fixed，居中展示，我们自然可以想到使用数组来存储这些消息的信息，并且根据每一条提示消息的显示隐藏更改每一项的top值，然后就是加一些动画(使用transition)以及细节处理了。

组件编写

新建两个组件MsgBox.vue和Msg.vue，前者负责收集和处理传入的消息数据(如：{type: 'success', message: '提示消息'})，对数组进行一定处理后，再将每一项传给Msg.vue展示。