Vue $mount实战之实现消息弹窗组件

之前的项目一直在使用Element-UI框架，element中的Notification、Message组件使用时不需要在html写标签，而是使用js调用。那时就很疑惑，为什么element ui使用this.$notify、this.$message就可以实现这样的功能？ 1、实现消息弹窗组件的几个问题 如何在任何组件中使用this.$message就可以显示消息？ 如何将消息的dom节点插入到body中？ 同时出现多个消息弹窗时，消息弹窗的z-index如何控制？ 2、效果预览 3、代码实现 PMessage.vue <template> &lt;transition name Vue $mount 是 Vue.js 框架中一个重要的方法，用于手动挂载一个已经创建的实例到 DOM 节点上。在这个实战中，我们将探讨如何实现类似 Element-UI 的 Message 弹窗组件，理解其背后的原理，并解决几个关键问题。 1. **如何在任何组件中使用 `this.$message` 显示消息？** 这种全局方法的实现通常依赖于 Vue 的插件机制。你需要在 Vue 的原型链上添加 `$message` 方法。在全局 Vue 实例创建后，可以这样操作： ```javascript Vue.prototype.$message = function(messageOptions) { // 创建并挂载 Message 组件实例 const messageInstance = new PMessage(messageOptions).$mount(); // 将组件的 DOM 插入到 body 中 document.body.appendChild(messageInstance.$el); }; ``` 2. **如何将消息的 DOM 节点插入到 body 中？** 在上面的示例中，我们使用 `$mount()` 生成一个未挂载的组件实例，然后通过 `document.body.appendChild` 将它的 DOM 节点添加到 body 中。`$mount()` 方法允许我们在没有挂载点的情况下创建组件，这正是实现全局消息组件的关键。 3. **多个消息弹窗的 z-index 控制** 当有多个消息弹窗同时出现时，为了避免遮挡，我们需要通过 CSS 来设置它们的 `z-index` 属性。通常，你可以为每个新创建的消息组件动态分配一个更高的 `z-index` 值，确保最新的消息总是在顶部。 以下是 `PMessage.vue` 组件的部分代码实现： ```vue <template> <transition name="message-fade"> <div class="p-message" :class="[type, extraClass]" v-show="show" @mouseenter="clearTimer" @mouseleave="startTimer"> <!-- 内容结构 --> </div> </transition> </template> <script> export default { data() { return { // 数据属性... }; }, methods: { startTimer() { // 定时关闭逻辑... }, clearTimer() { // 清除定时器... }, close() { // 关闭消息组件逻辑... }, destroyElement() { // 销毁组件并移除 DOM 元素... }, }, watch: { closed(newVal) { if (newVal) { // 关闭后销毁组件... } }, }, mounted() { this.startTimer(); }, }; </script> <style lang="stylus"> // 样式定义... </style> ``` 此外，还需要一个 `p-message.js` 文件来初始化并管理这些全局消息组件的实例。这个文件中会包含一个数组，用于存储所有活跃的消息组件实例，以便管理和控制它们的生命周期。 总结起来，实现 Vue 中的消息弹窗组件主要涉及以下几个步骤： 1. 在 Vue 原型上添加全局 `$message` 方法。 2. 使用 `$mount()` 创建组件实例并将其挂载到 body 中。 3. 管理多个消息组件的 `z-index` 以保证正确的堆叠顺序。 4. 添加适当的事件监听器以控制消息的显示和消失，以及定时关闭功能。 5. 实现组件的销毁逻辑，确保当消息关闭后能正确释放资源。 通过这个实战，我们可以深入理解 Vue 的组件化思想，以及如何利用 Vue 的生命周期和事件系统来构建可复用、灵活的消息提示功能。