之前的项目一直在使用Element-UI框架,element中的Notification、Message组件使用时不需要在html写标签,而是使用js调用。那时就很疑惑,为什么element ui使用this.$notify、this.$message就可以实现这样的功能?
1、实现消息弹窗组件的几个问题
如何在任何组件中使用this.$message就可以显示消息?
如何将消息的dom节点插入到body中?
同时出现多个消息弹窗时,消息弹窗的z-index如何控制?
2、效果预览
3、代码实现
PMessage.vue
// 绑定事件
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