/
message.vue
141 lines (123 loc) Β· 3.46 KB
/
message.vue
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
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
<template>
<transition
:name="ns.b('fade')"
@before-leave="onClose"
@after-leave="$emit('destroy')"
>
<div
v-show="visible"
:id="id"
ref="messageRef"
:class="[
ns.b(),
{ [ns.m(type)]: type && !icon },
ns.is('center', center),
ns.is('closable', showClose),
customClass,
]"
:style="customStyle"
role="alert"
@mouseenter="clearTimer"
@mouseleave="startTimer"
>
<el-badge
v-if="repeatNum > 1"
:value="repeatNum"
:type="badgeType"
:class="ns.e('badge')"
/>
<el-icon v-if="iconComponent" :class="[ns.e('icon'), typeClass]">
<component :is="iconComponent" />
</el-icon>
<slot>
<p v-if="!dangerouslyUseHTMLString" :class="ns.e('content')">
{{ message }}
</p>
<!-- Caution here, message could've been compromised, never use user's input as message -->
<p v-else :class="ns.e('content')" v-html="message" />
</slot>
<el-icon v-if="showClose" :class="ns.e('closeBtn')" @click.stop="close">
<Close />
</el-icon>
</div>
</transition>
</template>
<script lang="ts" setup>
import { computed, onMounted, ref, watch } from 'vue'
import { useEventListener, useResizeObserver, useTimeoutFn } from '@vueuse/core'
import { TypeComponents, TypeComponentsMap } from '@element-plus/utils'
import { EVENT_CODE } from '@element-plus/constants'
import ElBadge from '@element-plus/components/badge'
import { ElIcon } from '@element-plus/components/icon'
import { useNamespace } from '@element-plus/hooks'
import { messageEmits, messageProps } from './message'
import { getLastOffset } from './instance'
import type { BadgeProps } from '@element-plus/components/badge'
import type { CSSProperties } from 'vue'
const { Close } = TypeComponents
defineOptions({
name: 'ElMessage',
})
const props = defineProps(messageProps)
defineEmits(messageEmits)
const ns = useNamespace('message')
const messageRef = ref<HTMLDivElement>()
const visible = ref(false)
const height = ref(0)
let stopTimer: (() => void) | undefined = undefined
const badgeType = computed<BadgeProps['type']>(() =>
props.type ? (props.type === 'error' ? 'danger' : props.type) : 'info'
)
const typeClass = computed(() => {
const type = props.type
return { [ns.bm('icon', type)]: type && TypeComponentsMap[type] }
})
const iconComponent = computed(
() => props.icon || TypeComponentsMap[props.type] || ''
)
const lastOffset = computed(() => getLastOffset(props.id))
const offset = computed(() => props.offset + lastOffset.value)
const bottom = computed((): number => height.value + offset.value)
const customStyle = computed<CSSProperties>(() => ({
top: `${offset.value}px`,
zIndex: props.zIndex,
}))
function startTimer() {
if (props.duration === 0) return
;({ stop: stopTimer } = useTimeoutFn(() => {
close()
}, props.duration))
}
function clearTimer() {
stopTimer?.()
}
function close() {
visible.value = false
}
function keydown({ code }: KeyboardEvent) {
if (code === EVENT_CODE.esc) {
// press esc to close the message
close()
}
}
onMounted(() => {
startTimer()
visible.value = true
})
watch(
() => props.repeatNum,
() => {
clearTimer()
startTimer()
}
)
useEventListener(document, 'keydown', keydown)
useResizeObserver(messageRef, () => {
height.value = messageRef.value!.getBoundingClientRect().height
})
defineExpose({
visible,
bottom,
close,
})
</script>