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
| <!--
| 描述: 消息提示框模板
| 作者: Jack Chen
| 日期: 2020-04-18
| -->
|
| <template>
| <transition name="fade">
| <div class="toast-container" v-if="visible">
| <div class="toast" :class="type">
| <div class="content">
| <i class="iconfont" :class="'icon-' + type"></i>
| <span>{{ content }}</span>
| </div>
| <i v-if="hasClose" class="iconfont icon-close close" @click="visible = false"></i>
| </div>
| </div>
| </transition>
| </template>
|
| <script>
|
| export default {
| name: 'Toast',
| data() {
| return {
| content: '',
| time: 3000,
| visible: false,
| type: 'error', //四种类型：info, success, warning, error
| hasClose: false,
| }
| },
| mounted() {
| this.close();
| },
| methods: {
| close () {
| setTimeout(() =>{
| this.visible = false;
| }, this.time);
| }
| }
| }
| </script>
|
| <style lang="scss" scoped>
| /* 动画效果 淡入淡出 */
| .fade-enter-active, .fade-leave-active{
| transition: all 0.5s ease;
| }
| .fade-enter, .fade-leave-active{
| opacity: 0;
| }
|
| .toast-container {
| position: fixed;
| top: 0;
| right: 0;
| bottom: 0;
| left: 0;
| display: flex;
| justify-content: center;
| align-items: center;
| z-index: 99999;
| .toast {
| width: 340px;
| padding: 20px;
| border-radius: 6px;
| font-size: 16px;
| display: flex;
| justify-content: space-between;
| align-items: center;
| .content {
| span {
| padding-left: 10px;
| }
| }
| &.info {
| background: #edf2fc;
| border: 1px solid #e0eafc;
| color: #909399;
| }
| &.success {
| background: #f0f9eb;
| border: 1px solid #e7f9de;
| color: #67c23a;
| }
| &.warning {
| background: #fdf6ec;
| border: 1px solid #f9ecda;
| color: #e6a23c;
| }
| &.error {
| background: #fef0f0;
| border: 1px solid #fbdfdf;
| color: #f56c6c;
| }
| .close {
| cursor: pointer;
| color: #909399
| }
| }
| }
| </style>
|
|
