一直有自己造轮子的梦,于是这几天写了一个超级简单的轮子----消息弹框。还没有发布,你完全可以把它看成组件,如有不足请多多指教!下次附发布过程。
代码如下:
<template>
<transition :name="active">
<div class="snackbar">
<div class="snackbar_text" :style="{ background: activeColor,color:color}">{{text}
</div>
</div>
</transition>
</template>
<script>
export default {
props:['message','text','active','color','activeColor','color'],
data(){
return{
timer:''
}
},
created(){
if(this.message){
let timer = setTimeout(()=>{
this.$emit('listen')
},4000)
}
}
</script>
<style scoped lang="scss">
.snackbar{
position:fixed;
bottom:30px;
left:0;
right:0;
width:100%;
display: -webkit-flex;
display:flex;
align-items: center;
justify-content: center;
z-index:999;
&_text{
min-width:180px;
padding:10px 15px;
border-radius:5px;
color:#101010;
background:rgba(0,0,0,0.3);
font-size:14px;
text-align:center;
}
}
//混合器
@mixin animation {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
// css 动画
.snack-in-enter-active{
-webkit-animation-name: opacityIn;
animation-name: opacityIn;
@include animation ;
}
.snack-in-leave-active{
@include animation ;
-webkit-animation-name: opacityOut;
animation-name: opacityOut;
}
.snack-right-enter-active{
-webkit-animation-name: fadeInRight;
animation-name: fadeInRight;
@include animation ;
}
.snack-right-leave-active{
@include animation ;
-webkit-animation-name: fadeOutRight;
animation-name: fadeOutRight;
}
.snack-left-enter-active{
-webkit-animation-name: fadeInLeft;
animation-name: fadeInLeft;
@include animation ;
}
.snack-left-leave-active{
@include animation ;
-webkit-animation-name: fadeOutLeft;
animation-name: fadeOutLeft;
}
.snack-up-enter-active{
-webkit-animation-name: fadeInUp;
animation-name: fadeInUp;
@include animation ;
}
.snack-up-leave-active{
-webkit-animation-name: fadeInDown;
animation-name: fadeInDown;
@include animation ;
}
.snack-leave-active{
@include animation ;
-webkit-animation-name: opacityOut;
animation-name: opacityOut;
}
.snack-enter, .snack-leave-to {
opacity: 0;
}
//下--上
@-webkit-keyframes fadeInUp {
from {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes fadeInUp {
from {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
// 上---下
@-webkit-keyframes fadeInDown {
from {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
to {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
}
@keyframes fadeInDown {
from {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
to {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
}
// 左--右
@-webkit-keyframes fadeInLeft {
from {
opacity: 0;
-webkit-transform: translate3d(-10%, 0, 0);
transform: translate3d(-10%, 0, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes fadeInLeft {
from {
opacity: 0;
-webkit-transform: translate3d(-10%, 0, 0);
transform: translate3d(-10%, 0, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
// 右---左
@-webkit-keyframes fadeOutLeft {
from {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
to {
opacity: 0;
-webkit-transform: translate3d(-10%, 0, 0);
transform: translate3d(-10%, 0, 0);
}
}
@keyframes fadeOutLeft {
from {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
to {
opacity: 0;
-webkit-transform: translate3d(-10%, 0, 0);
transform: translate3d(-10%, 0, 0);
}
}
// 右--左
@-webkit-keyframes fadeInRight {
from {
opacity: 0;
-webkit-transform: translate3d(10%, 0, 0);
transform: translate3d(10%, 0, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes fadeInRight {
from {
opacity: 0;
-webkit-transform: translate3d(10%, 0, 0);
transform: translate3d(10%, 0, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
// 左--右
@-webkit-keyframes fadeOutRight {
from {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
to {
opacity: 0;
-webkit-transform: translate3d(10%, 0, 0);
transform: translate3d(10%, 0, 0);
}
}
@keyframes fadeOutRight {
from {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
to {
opacity: 0;
-webkit-transform: translate3d(10%, 0, 0);
transform: translate3d(10%, 0, 0);
}
}
// 固定位置
@-webkit-keyframes opacityIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes opacityIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@-webkit-keyframes opacityOut {
from {
opacity: 1;
}
to {
opacity: 9;
}
}
@keyframes opacityOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
</style>
在需要引用的页面,引入它:import vueMessage from './components/info' ,本人实在上级目录创建的,请注意引入路径
在HTML里:
<vue-message v-if="flag" :color="'#fff'" :activeColor="'green'" :active="'snack-left'" :message="flag" @listen="flag=false" :text="'小主您好啦'"></vue-message>
属性::color字体颜色,:activeColor背景颜色,:active 动画样式['sanck-in','sanck-left','sanck-right','sanck-up'],:text文本内容
注意:需要在父组件声明 flag :false
可以参考我的GitHub https://github.com/wuqiaoli/my-vue-express ----------dev分之下的sanck文件