index.vue
2.21 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<template>
<view style="" :class="textClass" v-if="show">
<image :class="iconClass" :src="icon" v-if="icon"></image>
{{text}}
</view>
</template>
<script type="text/ecmascript-6">
import icons from './icons'
export default {
data () {
return {
animateShow: false,
}
},
computed:{
show() {
let delay = this.$toastStore.getters.GET_TOAST_DURATION
let show = this.$toastStore.getters.GET_TOAST_SHOW
this.animateShow = show
if(show) {
setTimeout(() => {
this.animateShow = false
setTimeout(() => {this.$toastStore.commit('hideToast')}, 350 )
}, delay - 350 )
}
return show
},
text() {
return this.$toastStore.getters.GET_TOAST_TEXT
},
icon () {
let icon = this.$toastStore.getters.GET_TOAST_ICON
let iconNames = new Set(['success','error','info'])
if (iconNames.has(icon)) {
return icons[icon]
}else {
return false
}
},
textClass() {
let normalClass = this.$toastStore.getters.GET_TOAST_TEXT_CLASS_NAME || '__toast_text__'
let animatClass = this.animateShow ? ' enterAni' : ' fadeAni'
return normalClass + animatClass
},
iconClass() {
return this.$toastStore.getters.GET_TOAST_ICON_CLASS_NAME || '__toast_image__'
}
},
}
</script>
<style scoped>
.__toast_image__{
width: 75rpx;
height: 75rpx;
margin-bottom: 10rpx;
}
.__toast_text__{
min-height: 60rpx;
min-width: 150rpx;
max-width: 50%;
max-height: 50%;
border-radius: 10rpx;
z-index: 9999;
position: fixed;
font-size: 28rpx;
color: #fff;
top:50%;
left: 50%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
transform: translate(-50%, -50%) ;
background: rgba(0,0,0,.65);
padding: 20rpx;
opacity: 0;
}
.enterAni {
animation:enter 0.35s;
animation-fill-mode: forwards;
}
.fadeAni {
animation:fadeout 0.35s;
}
@keyframes enter
{
from {opacity:0;}
to {opacity:1;}
}
@keyframes fadeout
{
from {opacity:1;}
to {opacity:0;}
}
</style>