vue实现消息badge 标记_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

:class="[type, extraClass]"

v-show="show"

@mouseenter="clearTimer"

@mouseleave="startTimer">

// 绑定事件

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: {

startT