popup.vue消息提示组件

#popup{最大宽度：50%；位置：固定；右：0；顶部：0；>.ani{边界半径：0.4rem0.4rem00;盒子阴影：000.6remrgba（0、0、0、0.4）；填充：1rem2rem；保证金：1rem；溢出：隐藏；位置：相对；左：100%；>.bg{宽度：100%；高度：100%；边界半径：继承；z-索引：1；位置：绝对；左：0；顶部：0；}>.show{z-index:2;边界半径：继承；>span{&:before{字体系列：var(--iconfont);字体大小：1.4rem；右边距：1rem；}}>a{字体大小：0.8rem；行高：1.2rem；}}@each$cls,$col,$fin(warn,#ffe99a,#ffb100),(suc,#b5ffca,#5478ff),(err,#ffc4ba,#ff0012){&.#{$cls}{>.bg{背景：$col;}>.show>span:before{颜色：$f;内容：var(--i-#{$cls});}}}>span{位置：绝对；顶部：0.3rem；右：0.3rem；行高：0.7rem；游标：指针；颜色：#666；z-指数：2；&:before{字体系列：var(--iconfont);内容：var(--i-close);字体大小：0.6rem；}&:hover{颜色：红色；字体粗细：粗体；}}>.process{宽度：100%；高度：0.2rem；背景：#c300ff；位置：绝对；底部：0；左：0；z-指数：2；}}}原文地址https://blog.phyer.cn/article...分享一个测试demo视频代码popup.vue#popup{最大宽度：50%；位置：固定；右：0；顶部：0；>.ani{边界半径：0.4rem0.4rem00;盒子阴影：000.6remrgba（0、0、0、0.4）；填充：1rem2rem；保证金：1rem；溢出：隐藏；位置：相对；左：100%；>.bg{宽度：100%；高度：100%；边界半径：继承；z-索引：1；位置：绝对；左：0；顶部：0；}>.show{z-index:2;边界半径：继承；>span{&:before{字体系列：var(--iconfont);字体大小：1.4rem；右边距：1rem；}}>a{字体大小：0.8rem；行高：1.2rem；}}@each$cls,$col,$fin(warn,#ffe99a,#ffb100),(suc,#b5ffca,#5478ff),(err,#ffc4ba,#ff0012){&.#{$cls}{>.bg{背景：$col;}>.show>span:before{颜色：$f;内容：var(--i-#{$cls});}}}>span{位置：绝对；顶部：0.3rem；右：0.3rem；行高：0.7rem；游标：指针；颜色：#666；z-指数：2；&:before{字体系列：var(--iconfont);内容：var(--i-close);字体大小：0.6rem；}&:hover{颜色：红色；字体粗细：粗体；}}>.process{宽度：100%；高度：0.2rem；背景：#c300ff；位置：绝对；底部：0；左：0；z-指数：2；}}}util.jsimportpopupfrom'../../components/popup/popup.vue';window.header_vue=newVue({el:'#popup',data:{},components:{popup},methods:{pop_data(data){this.$refs.popup.show(data)}}});你只需要在使用的地方这样写：......header_vue.pop_data({state:'suc',msg:'success'})......该组件的velocityjs动画是基于velocityjs是一款兼容性强、性能强、可定制的前端动画框架。如果你有兴趣，你可以了解一下。