vue插件弹出提示组件全局

时间：2023-04-01 11:03:44 vue.js

.message{position:absolute;顶部：12vh；左：50%；填充：20px30px；边界半径：8px；背景色：#fff；转换：translateX(-50%)；transition:opacity0.3s,transform0.4s;font-size:30px;}.content{display:inline-block;左边距：12px；最小宽度：380px;}/*.#2ed573*/.notice-success{背景颜色：#f0f9eb;边框颜色：#e1f3d8;}.el-icon-success,.content-success{color:#67c23a;}.notice-warning{background-color:#fdf6ec;边框颜色：#faecd8;}.notice-warning.content-warning{颜色：#e6a23c;}.notice-error{背景颜色：#fef0f0;border-color:#fde2e2;}.notice-error.content-error{color:#f56c6c;}//东华.message-fade-enter,.message-fade-leave-to{opacity:0;转换：translateX(-50%)translateY(-12vh);}.message-fade-enter-to,.message-fade-leave{opacity:1;转换：translateX(-50%)translateY(0px);}.message-fade-enter-active{transition:all.5sease;}.message-fade-leave-active{transition:all.5scubic-bezier(1.0,0.2,0.8,1.0);}//在组件文件中创建通知文件，其中包含index.j,notice.vueindex.jsimportVuefrom'vue'constNoticeConstructor=Vue.extend(require('./notice.vue').default)letnId=1;constNotice=(option)=>{letid='notice-'+nId++constNoticeInstance=newNoticeConstructor({data:{content:option.message,type:option.type}})//实例化一个实例NoticeNoticeInstance.id=idNoticeInstance.$mount()withcontentcontent//挂载但没有插入dom，是一个完整的Vue实例NoticeInstance.visible=trueletnoticeDom=NoticeInstance.$eldocument.body.appendChild(noticeDom)//将dom插入到主体中"message-fade">>/i>{{content}}

.message{position:absolute;顶部：12vh；左：50%；填充：20px30px；边界半径：8px；背景色：#fff；转换：translateX(-50%)；transition:opacity0.3s,transform0.4s;font-size:30px;}.content{display:inline-block;左边距：12px；最小宽度：380px;}/*.#2ed573*/.notice-success{背景颜色：#f0f9eb;边框颜色：#e1f3d8;}.el-icon-success,.content-success{color:#67c23a;}.notice-warning{background-color:#fdf6ec;边框颜色：#faecd8;}.notice-warning.content-warning{颜色：#e6a23c;}.notice-error{背景颜色：#fef0f0;border-color:#fde2e2;}.notice-error.content-error{color:#f56c6c;}//东华.message-fade-enter,.message-fade-leave-to{opacity:0;转换：translateX(-50%)translateY(-12vh);}.message-fade-enter-to,.message-fade-leave{opacity:1;转换：translateX(-50%)translateY(0px);}.message-fade-enter-active{transition:all.5sease;}.message-fade-leave-active{transition:all.5scubic-bezier(1.0,0.2,0.8,1.0);}在main.jsimportNoticefrom'@/components/notice'//这个是index.jsVue.use(Notice)这样就可以在任何vue文件中引用了这个。$notice({message:'提交成功！',type:'成功'});