Toast组件
# 背景
# 组件说明
实现提示功能。
# 效果展示
# 实现的功能
- 根据某个判断条件或者点击某个按钮，弹出弹框；
- 可配置位置，类型，样式名等
# 使用案例
# 简单使用
vm.$toast('网络异常！')
1
# 使用options参数
* message 提示信息内容
* duration 停留时间，单位为毫秒
* position 显示位置：top、middle、bottom
* className 样式名称
vm.$toast({
message: '网络异常！',
duration: 2000,
position: 'middle',
className: 'big'
})
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
# 错误提示
vm.$toast({
message: '验证码错误！',
duration: 2000,
type: 'error'
})
1
2
3
4
5
2
3
4
5
# 具体实现
# toast.vue
<template>
<transition name="toast-pop">
<div v-show="visible" class="toast" :class="customClass" @click="handleClose">
<span class="text">{{message}}</span>
</div>
</transition>
</template>
<script>
export default {
name: 'Toast',
props: {
message: String, // 提示信息内容
className: { // 样式名
type: String,
default: ''
},
position: { // 位置：top、middle、bottom
type: String,
default: 'middle'
},
type: { // 提示类型：normal、error
type: String,
defalut: 'normal'
}
},
data () {
return {
// 是否显示
visible: false
}
},
computed: {
// 获取样式
customClass () {
let classes = []
classes.push('toast-' + this.type)
switch (this.positon) {
case 'top':
classes.push('is-placetop')
break
case 'bottom':
classes.push('is-placebottom')
break
default:
classes.push('is-placemiddle')
}
this.className && classes.push(this.className)
return classes
}
},
methods: {
handleClose () {
this.$emit('close')
}
}
}
</script>
<style lang="scss" scoped px2rem="false">
.toast {
position: fixed;
box-sizing: border-box;
min-width: 200px;
max-width: 50%;
max-height: 85%;
margin-top: 0;
padding: 18px 30px;
border-radius: 10px;
background: rgba(0, 0, 0, 0.7);
color: #fff;
text-align: center;
overflow-y: auto;
z-index: 2000;
.text {
display: block;
font-size: 16px;
line-height: 1.5;
text-align: center;
word-wrap: break-word;
}
}
.is-placetop {
top: 50px;
left: 50%;
transform: translate(-50%, 0);
}
.is-placemiddle {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.is-placebottom {
bottom: 50px;
left: 50%;
transform: translate(-50%, 0);
}
.is-placetop.toast-pop-enter-active, .is-placetop.toast-pop-leave-active,
.is-placemiddle.toast-pop-enter-active, .is-placemiddle.toast-pop-leave-active {
transition: opacity .3s linear, margin-top .3s ease;
}
.is-placetop.toast-pop-enter, .is-placetop.toast-pop-leave-to,
.is-placemiddle.toast-pop-enter, .is-placemiddle.toast-pop-leave-to {
margin-top: 30px;
opacity: 0;
}
.is-placebottom.toast-pop-enter-active, .is-placebottom.toast-pop-leave-active {
transition: opacity .3s linear, margin-bottom .3s ease;
}
.is-placebottom.toast-pop-enter, .is-placebottom.toast-pop-leave-to {
margin-bottom: -30px;
opacity: 0;
}
.toast-error {
background: rgba(255,102,104,.9);
}
</style>
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
110
111
112
113
114
115
116
117
118
119
120
121
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
110
111
112
113
114
115
116
117
118
119
120
121
# toastPlugin.js
import Vue from 'vue'
import Toast from './toast.vue'
// toast构造函数
const ToastConstructor = Vue.extend({
extends: Toast
})
// toast实例池
let toastPool = []
/** 获取toast实例（实例池中有从池中取，没有则新建） */
let getInstance = () => {
// console.log('toastPool:', toastPool)
if (toastPool.length > 0) {
return toastPool.shift()
}
return new ToastConstructor({
el: document.createElement('div')
})
}
/** 归还实例到实例池 */
let returnInstance = instance => {
if (instance) {
toastPool.push(instance)
// console.log('归还实例:', instance, toastPool)
}
}
/** 文档中移除toast的DOM节点 */
function removeDom (event) {
if (event.target.parentNode) {
event.target.parentNode.removeChild(event.target)
}
}
// 关闭
ToastConstructor.prototype.close = function () {
this.visible = false // 不可见
this.closed = true // 关闭状态
this.$el.addEventListener('transitionend', removeDom) // 动画完成后移除DOM节点
returnInstance(this) // 实例对象归还到实例池，实例可以重复利用
}
// 显示toast提示信息
export default function (options = {}) {
// 显示时间，默认3秒
let duration = options.duration || 3000
let instance = getInstance()
// console.log('instance=', instance)
// 显示类型
instance.type = options.type || 'normal'
// 显示内容
instance.message = typeof options === 'string' ? options : options.message
// 显示位置：top、middle、bottom
instance.position = options.position || 'middle'
instance.className = options.className || ''
// 移除动画完成事件
instance.$el.removeEventListener('transitionend', removeDom)
instance.$on('close', () => {
instance.close()
})
// console.log('instance.$el=', instance.$el)
// 将节点添加到文档
document.body.appendChild(instance.$el)
instance.visible = true
instance.closed = false
// 清除定时器
instance.timer && clearTimeout(instance.timer)
// 设置定时器，关闭toast
instance.timer = setTimeout(() => {
// console.log('关闭', instance)
!instance.closed && instance.close()
instance.timer = null
}, duration)
}
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
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
# main.js
import ToastPlugin from './plugins/toastPlugin.js'
// toast提示信息插件
Vue.use(ToastPlugin)
1
2
3
4
2
3
4
上次更新: 2022/04/15, 05:41:28