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

之前的项目一直在使用元素-用户界面框架，元素中的通知、消息组件使用时不需要在超文本标记语言写标签，而是使用射流研究…调用。那时就很疑惑，为什么元素用户界面使用这个$notify，这个。$消息就可以实现这样的功能？

1、实现消息弹窗组件的几个问题

如何在任何组件中使用这个。$消息就可以显示消息？如何将消息的数字正射影像图节点插入到身体中？同时出现多个消息弹窗时，消息弹窗的z指数如何控制？2、效果预览

3、代码实现

PMessage.vue

模板转换名称=' message-fade ' div class=' p-message ' : class='绑定事件function _addEvent(el，eventName，fn){ if(document。addEvent侦听器){ El。addEvent侦听器(事件名称，fn，false)；} else if(窗口。attachevent){ El。attachatevent(' on '事件名称，fn)；} };//解绑事件function _offEvent(el，eventName，fn){ if(document。removeevent侦听器){ El。removeevent侦听器(事件名称，fn，false)；} else if(窗口。独立通风口){ El。单独的通风口(‘on’事件名称，fn)；} };导出默认{ name: 'PMessage '，data(){ return { type : ' success '，duration: 3000，extraClass: ' '，message: ' '，timer: null，closed: false，show: false } }，methods : { startTimer(){ if(this。持续时间0){ this。timer=setTimeout(()={ if(！这个。关闭){这个。closed()；} }，这个。持续时间)；} }，clearTimer(){ cleartime out(这。计时器)；}，close(){ this。closed=trueif(这种类型。onclose==' function '){//调用事件方法，以从p-message.js中的例子数组中移除当前组件，不移除的话就占空间了这个。onclose()；} }, //销毁组件驱逐舰元素(){ _offEvent(这$el，transitionend，这个。derelement)；//手动销毁组件这个$ destroy(true)；这个$el.parentNode.removeChild(这$ El)；}，}，watch: { //监听关闭，如果它为没错，则销毁消息组件已关闭(NewVal){ if(NewVal){ this。show=false//消息过渡完成后再去销毁消息组件及移除元素_addEvent(这$el，transitionend，这个。derelement)；} } }，挂载(){ this。start timer()；} }/scriptstyle lang='手写笔@ import ' p-message。styl/style p-message。射流研究…

从“Vue”导入Vue从""导入PMessage ./PMessage。vue '；从导入{人口管理器}././common/js/popup-manager '；让PMessageControl=vue。扩展消息；让计数=0;//存储消息组件实例，如需有关闭所有消息的功能就需要将每个消息组件都存储起来让实例=[];const isVNode=function(node){ return node！==null类型的节点==“对象”对象。原型。拥有自己的财产。呼叫(节点、“组件选项”)；};const Message=函数(选项){ options=options | | { }；if(options类型==' string '){ options={ message : options }；}让id='message_ '计数；让用户流失=options.onClose//PMesage。某视频剪辑软件销毁时会调用传递进去的onClose，而事件的处理就是将指定编号的消息组件从例子中移除选项。onclose=function(){ Message ._close(id，UserOnclose)；};/* 这里传递给PMessageControl的数据不会覆盖PMessage.vue中原有的数据，而是与PMessage.vue中原有的数据进行合并，类似* 与混合，包括传递方法，生命周期函数也是一样*/let instance=new PMessageControl({ data : options })；//传递vNode if(isVNode)(实例。消息){实例.$老虎机。默认=[实例。消息]；instance . message=null } instance . id=id//渲染元素，随后使用原生附录子将数字正射影像图插入到页面中实例$ mount()；让$el=实例.$ el//消息弹窗的z指数由弹出窗口管理器来提供$ El。风格。zindex=Popupmanager。GetNextzindex()；文件。尸体。append child($ El)；//将消息显示出来instance.show=trueconsole.log(实例)实例。push(实例);返回实例；};//消息简化操作["成功"、"错误"]。forEach(函数（项){消息[项目]=选项={ if(选项类型==' string '){选项={消息：选项} }选项。type=item返回消息（选项);}});/** * 从例子删除指定消息，内部使用* @参数标识* @参数用户onclose * @私有*/消息._close=function (id，userOnClose) { for(var i=0，len=instances.length我透镜；I){ if(instance[I]).id===id){ if(usernocose的类型==' function '){ usernocose(实例[I])；}实例。拼接(，1)；打破；} }};//关闭所有消息消息。close all=function(){ for(var I=instance)。长度-1；I=0；I-){实例。close()；}};导出默认消息；popup-manager.js

让zIndex=1000让hasZIndexInited=false const Popupmanager={//获取索引getNextZIndex(){ if(！hasZIndexInited){ hasZIndexInited=true；返回zIndex}返回zIndex } }导出{ Popupmmanager }；'的p-index.jsimport pMessage ./p-消息。js '；导出默认的pMessagep-消息。styl。p消息{位置：固定；top: 20px左侧： 50%;padd : 8px 15px border-半径： 4px背景-color : # fff；color : # 000 transform : translateX(-50%)；过渡：不透明度。3s，变形. 4s .信息-淡入。消息-淡入淡出-离开到{ opa city 3360 0；transform : translateX(-50%)translateY(-30px)；} .消息-淡入淡出-进入到，消息-淡入淡出{ opa city 3360 1；transform : translateX(-50%)translateY(0)；} .错误{ color: # ff3737}。p消息图标{ /*使图标与内容能够垂直居中*/display:表格单元格；垂直对齐： 中间；宽度： 64px高度： 45px。p-消息-图标-成功{背景： URL('././资产/图像/图标/消息-图标/图标_成功。png ')无重复0 0；} .p消息图标错误{ background: url('././资产/图像/图标/消息-图标/图标_错误。png ')无重复0 0；} } .p-消息-内容{ /*使图标与内容能够垂直居中*/display:表格单元格；垂直对齐： 中间；左衬垫left: 15px}}main.js

//引入pMessage组件从""导入pMessage ./组件/p-消息/p-索引。js '；//将pMessage绑定到Vue。原型中。这样在组件中就可以通过这个$pMessage()的形式来使用了vue。原型。$ pMEssage=pMEssage