自定义ElementUI Message功能：限制显示数量与优先级策略

"ElementUI之Message功能拓展详解，通过自定义实现对消息提示的控制，包括限制页面同时展示的最大数量、优先级控制以及超出限制时的队列显示策略。" ElementUI是一个广泛使用的前端UI框架，提供了丰富的组件和便捷的API，帮助开发者构建美观的Web应用。在实际项目开发中，Message组件常用于快速显示全局提示信息，如错误、警告或成功状态。然而，有时我们需要根据业务需求对Message功能进行扩展和定制，以满足更复杂的交互需求。 在上述场景中，有三个主要的定制需求： 1. 限制页面同时展示消息提示语的最大数量：此功能确保了页面不会因为过多的提示信息而显得混乱。当达到预设的最大数量时，新的提示信息将替换掉最早创建的旧提示。这可以通过维护一个实例列表，并在每次添加新实例时检查列表长度来实现。如果超过限制，就需要销毁最老的实例。 2. 根据不同情况优先显示新/旧消息提示语：这个特性允许我们根据业务逻辑调整消息的显示顺序。例如，对于紧急或重要的消息，我们可以设置其优先级，使其在其他消息之前显示。 3. 超出最大显示数量时的消息队列：如果新消息数量超过最大限制，剩余的消息将以队列的形式依次展示，即当某个消息被关闭后，下一个等待显示的消息才会出现。实现这一功能需要监听每个消息实例的可见性变化，当一个消息关闭时，从实例列表中移除并显示下一个等待的消息。 为了实现这些功能，开发者可以创建一个新的名为ZMessage的构造函数，它继承自ElementUI的Message。在ZMessage构造函数内部，可以设置静态配置项（如最大显示数`max`）和实例列表（`instances`）。`setMessage`方法用来创建消息并管理实例列表，同时监听消息的消失事件，以便在消息关闭时更新实例列表。 具体代码实现可能包括以下步骤： - 使用`Message(options)`创建新的消息实例，并在实例上添加一个`$watch`监听器，以便在消息消失时从`ZMessage.instances`中移除。 - 当创建新消息实例时，检查`ZMessage.instances`的长度是否超过了`ZMessage.config.max`。如果超过，销毁最老的消息实例；如果没有超过，将新实例添加到列表中。 - 通过实例列表和消息的生命周期管理，实现消息的动态显示和隐藏，以符合设定的显示策略。 这样的自定义扩展使得Message组件更加灵活，能够更好地适应项目中的各种交互需求。通过深入理解ElementUI的源码并进行适当的修改，开发者可以创造出符合自己项目需求的定制化组件，提升用户体验。