最近要写个弹框，发现元素用户界面弹框样式还可以，就复制下来改吧改吧。也不分步骤详细介绍了直接上代码。

在组件目录中新建文件夹消息

我把消息目录里的东西给大家贴出来

消息文件夹

科学研究委员会文件夹

index.js

从""导入邮件/src/main。js '；导出默认消息；mian.js

从“Vue”导入Vue从""导入Main ./main。vue '；让MessageConstructor=vue。扩展(主)；让实例；让实例=[];让seed=1；const Message=(选项={ })={ if(选项类型==' string '){ options={ Message : options }；}让userOnClose=options . onclose elet id=' message _ '种子；选项。onclose=function(){ message。close(id，userOnClose)；};instance=new MessageConstructor({ data : options })；instance.id=idinstance.vm=实例$ mount()；文件。尸体。appendchild(实例。虚拟机。$ El)；实例。虚拟机。可见=真；实例。DOM=实例。虚拟机。$ El实例。多姆。风格。zindex=999instances.push(实例);返回instance.vm}["成功"、"警告"、"信息"、"错误"]。forEach(类型={消息[类型]=选项={ if(选项类型==' string ')} {选项={消息：选项}；}选项. type=type返回消息（选项);};});Message.close=function(id，userOnClose) { for(让i=0，len=instances.length我透镜；I){ if(id===instance[I]).id){ if(usernocose==' function '的类型){ usernonclose(实例[I])；}实例。拼接(，1)；打破；} }};消息。close all=function(){ for(let I=instance。长度-1；I=0；I-){实例[I].close()；}};导出默认消息；mian.vue

模板过渡名称=' message-fade ' div : class='[' message '，键入！iconClass？`消息-${ type }` : '，居中？中心' : ',显示关闭？可关闭的： ' '，自定义类']v-show=' visible ' @鼠标回车=' clearTimer ' @鼠标左键=' startTimer ' I : class=' icon class ' v-if=' icon class '/I I : class=' type class ' v-else/I slot p v-if='！dangerouslyusehtml string ' class=' message-content ' { message } }/p p v-else v-html=' message ' class=' message-content '/p/slot I v-if=' showClose ' class=' message-close-BTN图标-close ' @ click=' close '/I/div/transition/模板脚本const type map={ success : ' success '，info: 'info '，warning: ' warning '，error 33: ' error ' }；导出默认值{ data()}返回{ visible: false，message: ' '，duration: 1000，type: 'info '，iconClass: ' '，customClass: ' '，onClose: null，showClose: false，closed: false，timer: null，dangerouslyusehtml string 3360 false，center: false } }，computed 3: this . icon class？`消息-图标图标-$ { TypeMap[this。type]} ` : '；} }，手表： {关闭(NewVal){ if(NewVal){ this。可见=假；这个$ El。add event listener(' transition end '，这。DeskElement)；} } }，methods: {驱逐舰元素(){这个.$ El。removeeventlistener(' transitionend ),这。DeskElement)；这个$ destroy(true)；这个$el.parentNode.removeChild(这$ El)；}，close(){ this。closed=trueif(这种类型。onclose==' function '){ this。onclose(这个)；} }，clearTimer(){ cleartime out(这。计时器)；}，startTimer(){ if(this。持续时间0){ this。timer=setTimeout(()={ if(！这个。关闭){这个。closed()；} }，这个。持续时间)；} }，按键(e){ if(e .键码===27){//ESC关闭消息if(！这个。关闭){这个。closed()；} } } },挂载(){这个。start timer()；文件。addeventlistener(' keydown '，这。keydown)；}，在销毁(){文档之前。removeeventlistener(' keydown '，这。keydown)；} }/scriptstyle lang='less ' .消息{最小宽度： 200像素；盒子尺寸：边框盒子；边界半径： 3pxborder: 1px实心# ebeef5位置：固定；左侧： 50%;top : 20p xtransform : translateX(-50%)；背景-color : # EDF 2 F3；过渡：不透明度0.3s，变形0.4s飞越：隐藏；padd : 10pxdisplay : flex align-items :居中；} .消息图标{ width: 15px高度： 15px边界半径： 100%;背景# fffdisplay:内联块；右边距： 10px。图标-成功{ background: url('./././资产/图像/图标-成功。png ')不重复中心中心；背景尺寸：汽车100%;} .图标-错误{ background: url('./././资产/图像/图标-error.png ')无重复居中；背景尺寸：汽车100%;} .图标-信息{ background: url('./././资产/图像/图标-info.png ')无重复中心中心；背景尺寸：汽车100%;} .图标-警告{ background: url('./././资产/图像/图标-警告。png ')不重复中心中心；背景尺寸：汽车100%;} } .消息-成功{ background : # f2f 8 ECB order-color : # e4f 2da；消息内容{ color : # 7 ebe 50} } .消息-错误{ background : # fcf 0f 0 border-color : # f9e 3e 2；消息内容{ color: # e57470} }。消息-警告{背景： # fcf 6 ed边框颜色： # F8 ecda；消息内容{ color: # dca450} }。message-info { background : # eef2fb；边框颜色： # ebee F4；消息内容{ color: # 919398} }。信息-淡入。消息-淡入淡出-保持活动状态{ opa city 3360 0；transform: translate(-50%，-100%)；}/样式以上就是封装的所有代码接下来就来看看如何引用

main.js中引入

从"@/组件/消息/索引。js "导入消息

原型$message=消息

调用

在你需要的页面调用

这个。$ message({ message : ' prompt message '，type : ' error '/type有四个值1 . error 2 . success 3 . info 4 . warning })；

类型就是成功

类型为警告

类型是信息

类型为errpr

用你自己的图片作为小图标的图片

摘要

以上是边肖介绍的vue项目中模仿element-ui效果的示例代码，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你的！