Vue $mount深度解析：构建动态消息弹窗组件
9 浏览量
更新于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
<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>
// 绑定事件
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页未读，立即下载
623 浏览量
359 浏览量
2533 浏览量
925 浏览量
5961 浏览量
359 浏览量
139 浏览量
529 浏览量
428 浏览量
