仿照Element-ui实现一个简易的$message方法

"仿照Element-ui实现一个简易的$message方法" 本文主要介绍了如何仿照 Element-ui 实现一个简易的 $message 方法，用于在页面顶部滑下的消息提示。该方法可以同时显示多条消息，并且可以根据每一条提示消息的显示隐藏更改每一项的 top 值，然后加一些动画（使用 transition）以及细节处理。 我们来看下 Element-ui 中消息提示的效果是怎么样的，并找些思路。从图中我们可以看消息提示是可以同时显示多条的，并且定位看起来都是 fixed，居中展示，我们自然可以想到使用数组来存储这些消息的信息，并且根据每一条提示消息的显示隐藏更改每一项的 top 值，然后就是加一些动画（使用 transition）以及细节处理了。 在实现这个方法时，我们可以新建两个组件 MsgBox.vue 和 Msg.vue，前者负责收集和处理传入的消息数据（如：{type: ‘success’, message: ‘提示消息’}），对数组进行一定处理后，再将每一项传给 Msg.vue 展示。 在 MsgBox.vue 组件中，我们可以编写方法处理数组的方法 addMsg、resetTop 和 clear，其中 addMsg 负责收集消息数据，给每一个 msg 添加一个负责控制该条消息显示隐藏的属性 show；resetTop 负责控制消息距顶距离的属性 top 及各条消息的显示隐藏；clear 负责当数组中所有消息都处于隐藏状态时将消息数组清空。 在 template 部分，我们可以遍历 msgs 数组，将每一项传给子组件 Msg，並使用 transition 组件实现动画效果。 Msg 组件中逻辑较少，主要是在组件挂载时启动一个定时器，在一定时间后通过 emit 触发父组件中的 resetTop 方法将组件关闭。另外还有一些根据参数获取当前消息信息的 computed 方法。 通过这种方式，我们可以仿照 Element-ui 实现一个简易的 $message 方法，用于在页面顶部滑下的消息提示。