toast.vue
2.43 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
98
99
100
101
102
103
104
105
106
107
108
109
<template>
<div
class="zan-toast"
:class="{ 'zan-toast--notitle' : !zanToast.title }"
v-if="zanToast.show"
@click="clearZanToast"
>
<!-- icon 展示 -->
<div v-if="zanToast.icon || zanToast.image">
<div
v-if="zanToast.image"
class="zan-toast__icon zan-toast__icon-image"
:style="computedStyleStr"
></div>
<div
v-else-if="zanToast.icon === 'loading'"
class="zan-toast__icon zan-toast__icon-loading"
>
<div class="zan-loading"></div>
</div>
<div
v-else
class="zan-toast__icon zan-icon"
:class="'zan-icon-' + zanToast.icon"
></div>
</div>
<!-- 文案展示 -->
<div v-if="zanToast.title">{{ zanToast.title }}</div>
</div>
</template>
<script>
export default {
computed: {
computedStyleStr: function () {
return `background-image: url(${this.zanToast.image});`
}
},
data () {
return {
zanToast: {}
}
},
methods: {
showZanToast (title, timeout) {
console.log(this)
const options = formatParameter(title, timeout)
// 清除上一轮的计时器
const { timer = 0 } = this.zanToast || {}
clearTimeout(timer)
// 弹层设置~
const z = {
show: true,
icon: options.icon,
image: options.image,
title: options.title
}
this.zanToast = z
// 传入的显示时长小于0，就认为需要一直显示
if (timeout < 0) {
return
}
// 下一轮计时器
const nextTimer = setTimeout(() => {
this.clearZanToast()
}, timeout || 3000)
this.zanToast.timer = nextTimer
},
// 清除所有 toast
clearZanToast () {
const { timer = 0 } = this.zanToast || {}
clearTimeout(timer)
this.zanToast.show = false
},
// 快捷方法，显示 loading
showZanLoading (title) {
const options = formatParameter(title)
this.showZanToast({
...options,
icon: 'loading'
})
}
}
}
function formatParameter (title, timeout = 0) {
// 如果传入的 title 是对象，那么认为所有的配置属性都在这个对象中了
if (typeof title === 'object') {
return title
}
return {
title,
timeout
}
}
</script>
<style scoped>
</style>