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
| <template>
| <transition name="el-message-fade" @after-leave="handleAfterLeave">
| <div
| :class="[
| 'el-message',
| type && !iconClass ? `el-message--${ type }` : '',
| center ? 'is-center' : '',
| showClose ? 'is-closable' : '',
| customClass
| ]"
| :style="positionStyle"
| v-show="visible"
| @mouseenter="clearTimer"
| @mouseleave="startTimer"
| role="alert">
| <i :class="iconClass" v-if="iconClass"></i>
| <i :class="typeClass" v-else></i>
| <slot>
| <p v-if="!dangerouslyUseHTMLString" class="el-message__content">{{ message }}</p>
| <p v-else v-html="message" class="el-message__content"></p>
| </slot>
| <i v-if="showClose" class="el-message__closeBtn el-icon-close" @click="close"></i>
| </div>
| </transition>
| </template>
|
| <script type="text/babel">
| const typeMap = {
| success: 'success',
| info: 'info',
| warning: 'warning',
| error: 'error'
| };
|
| export default {
| data() {
| return {
| visible: false,
| message: '',
| duration: 3000,
| type: 'info',
| iconClass: '',
| customClass: '',
| onClose: null,
| showClose: false,
| closed: false,
| verticalOffset: 20,
| timer: null,
| dangerouslyUseHTMLString: false,
| center: false
| };
| },
|
| computed: {
| typeClass() {
| return this.type && !this.iconClass
| ? `el-message__icon el-icon-${ typeMap[this.type] }`
| : '';
| },
| positionStyle() {
| return {
| 'top': `${ this.verticalOffset }px`
| };
| }
| },
|
| watch: {
| closed(newVal) {
| if (newVal) {
| this.visible = false;
| }
| }
| },
|
| methods: {
| handleAfterLeave() {
| this.$destroy(true);
| this.$el.parentNode.removeChild(this.$el);
| },
|
| close() {
| this.closed = true;
| if (typeof this.onClose === 'function') {
| this.onClose(this);
| }
| },
|
| clearTimer() {
| clearTimeout(this.timer);
| },
|
| startTimer() {
| if (this.duration > 0) {
| this.timer = setTimeout(() => {
| if (!this.closed) {
| this.close();
| }
| }, this.duration);
| }
| },
| keydown(e) {
| if (e.keyCode === 27) { // esc关闭消息
| if (!this.closed) {
| this.close();
| }
| }
| }
| },
| mounted() {
| this.startTimer();
| document.addEventListener('keydown', this.keydown);
| },
| beforeDestroy() {
| document.removeEventListener('keydown', this.keydown);
| }
| };
| </script>
|
|
