Vue $mount深度解析：构建动态消息弹窗组件

193 浏览量更新于2024-08-31 收藏 57KB PDF 举报

"本文主要探讨了如何利用Vue的$mount方法来实现一个自定义的消息弹窗组件，包括解决在任意组件中调用、DOM插入、z-index管理等问题，并提供了具体的代码实现示例。" 在Vue.js开发中，我们常常会遇到需要创建自定义组件的需求，比如消息弹窗组件。Vue的`$mount`方法在此类场景中起到了关键作用，它允许我们将Vue实例挂载到指定的DOM元素上，使得我们可以动态地生成和管理这些组件。Element-UI的`Notification`和`Message`组件就是很好的例子，它们通过JavaScript调用而不是HTML标签来展现。实现消息弹窗组件面临几个关键问题： 1. 全局调用：在任何组件中都可以使用`this.$message`显示消息，这通常通过在Vue的原型链上挂载自定义方法实现。例如，我们可以在Vue的初始化阶段，添加`$message`方法到Vue.prototype上，这样每个组件实例都可以访问到它。 2. DOM插入：为了实现弹窗组件在页面任意位置显示，我们需要将其挂载到<body>元素上，确保它总是在其他内容之上。这可以通过Vue的`$mount`方法实现，传入一个空的DOM元素或者选择器，将组件实例挂载到该位置。 3. z-index管理：当有多个消息弹窗同时出现时，我们需要控制它们的堆叠顺序，即z-index属性。这通常通过维护一个全局的z-index计数器来完成，每次创建新的消息弹窗时，递增计数器并将其赋值给当前弹窗的z-index。以下是一个简单的消息弹窗组件`PMessage.vue`的代码实现： ```html <template> <transition name="message-fade"> <div class="p-message" :class="[type, extraClass]" v-show="show" @mouseenter="clearTimer" @mouseleave="startTimer"> <div class="p-message-container"> <i class="p-message-icon" :class="`p-message-icon-${type}`"></i> <div class="p-message-content"> <slot class="p-message-content"> <div v-html="message"></div> </slot> </div> </div> </div> </transition> </template> <script> export default { data() { return { show: false, type: '', extraClass: '', message: '', zIndex: 0, timer: null, }; }, methods: { // 添加事件和移除事件的函数 // ... clearTimer() { clearTimeout(this.timer); }, startTimer() { // 设置关闭弹窗的延时逻辑 // ... }, }, beforeCreate() { // 在Vue实例创建前，将`$message`方法挂载到Vue.prototype上 // ... }, mounted() { // 将组件挂载到body document.body.appendChild(this.$el); this.zIndex = ++globalZIndexCounter; // 全局z-index计数器 }, beforeDestroy() { // 在组件销毁前，从body中移除并还原z-index document.body.removeChild(this.$el); globalZIndexCounter--; }, }; ``` 这个组件模板包含了消息类型、额外样式、内容和过渡效果。`data`属性存储了显示状态、类型、内容等信息，以及用于计时关闭的变量。`beforeCreate`和`beforeDestroy`钩子分别用于全局挂载和移除组件，`mounted`钩子用于设置z-index。此外，还需要实现事件绑定和计时器逻辑。通过这种方式，我们不仅可以创建一个功能完备的消息弹窗组件，还能确保其在页面上的正确显示和管理。这种实践方法对于构建动态和响应式的前端应用非常有用，同时也能提高代码的复用性和可维护性。

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

主要介绍了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

<div class="p-message"

:class="[type, extraClass]"

v-show="show"

@mouseenter="clearTimer"

@mouseleave="startTimer">

</slot>

</div>

</transition>

</template>

// 绑定事件

function _addEvent(el, eventName, fn){

if(document.addEventListener){

el.addEventListener(eventName, fn, false);

}else if(window.attachEvent){

el.attactEvent('on' + eventName, fn);

}

};

// 解绑事件

function _offEvent(el, eventName, fn){

if(document.removeEventListener){

el.removeEventListener(eventName, fn, false);

}else if(window.detachEvent){

el.detachEvent('on' + eventName, fn);

}

};

export default {

name: "PMessage",

data(){

return {

type: 'success',

duration: 3000,

extraClass: '',

message: '',

timer: null,

closed: false,

show: false

}

methods: {

startTimer(){

if(this.duration > 0){

this.timer = setTimeout(() => {

if(!this.closed){

this.close();

}

}, this.duration);

下载后可阅读完整内容，剩余3页未读，立即下载

weixin_38555304

粉丝: 2
资源: 994

Vue $mount深度解析：构建动态消息弹窗组件

一个基于Vue20的弹窗组件PC

vue3 封装一个全局通用弹窗提示组件（利用js调用 类似于element）

vue3 el-dialog的弹窗组件

vue3封装全局弹窗组件

vue element 弹窗组件封装

vue组件函数调用--弹窗组件

vue好用的弹窗组件

在Vue 2中如何使用父组件向弹窗组件传值

vue2中点击详情怎么忘弹窗传值

vue 有没有其他的弹窗组件库

最新资源

vue3 封装一个全局通用弹窗提示组件（利用js调用类似于element）