模仿Element-ui实现页面滚动消息提示功能

在本文中，作者探讨了如何仿照Element-ui的风格实现一个简易的$message方法，用于页面顶部的多条消息提示。首先，通过分析Element-ui中的消息提示功能，发现其特点包括支持多条消息同时显示，固定居中定位，并且带有动画效果。因此，设计的核心是利用数组存储消息数据，每个消息都有一个show属性控制其显示与隐藏，top属性控制位置，并通过定时器管理消息的显示逻辑。 1. **思路梳理** - 模拟element-ui的消息提示样式，采用数组来存储消息对象，包括类型（如success、info等）和内容。 - 使用数组索引控制每条消息的显示和隐藏，通过改变top值实现消息的逐条滑出和隐藏效果。 - 添加过渡动画，提供更平滑的视觉体验。 2. **组件编写** - 分离功能，创建`MsgBox.vue`和`Msg.vue`两个组件：`MsgBox.vue`负责处理消息数据的收集、添加、重置位置以及清除无用消息，而`Msg.vue`则负责展示实际的消息内容。 - `MsgBox.vue`中的关键方法： - `addMsg`: 接收消息对象并将其添加到`msgs`数组中，同时设置初始显示状态为true。 - `resetTop`: 清空定时器，根据当前消息的索引动态调整`top`值和显示状态。 - `clear`: 清除所有已隐藏的消息，重置定时器。 3. **代码实现细节** - 在`ts`部分，通过`msg.show`属性控制消息的显示/隐藏，`msg.top`属性表示消息相对于页面顶部的距离，通过递增`ind`变量来计算新的top值。 - 使用`setTimeout`配合`some()`方法判断所有消息是否都隐藏，只有当所有消息隐藏时才执行清除操作。 通过以上步骤，开发者可以根据需求轻松地在项目中实现一个自定义的消息提示功能，模仿Element-ui的设计风格，同时保持代码简洁易维护。这种方法不仅适用于页面顶部消息提示，也可以根据需要扩展其他类似的提示组件，比如底部通知或侧边栏提醒。