94 lines
1.9 KiB
Vue
94 lines
1.9 KiB
Vue
|
<script setup>
|
||
|
|
import { ref, computed } from 'vue'
|
||
|
|
import MessageContent from './message/index.vue'
|
||
|
|
|
||
|
|
const visible = ref(false)
|
||
|
|
const messageType = ref('success')
|
||
|
|
const messageText = ref('')
|
||
|
|
const showIcon = ref(true)
|
||
|
|
const customStyle = ref({})
|
||
|
|
const title = ref({})
|
||
|
|
const subTitle = ref({})
|
||
|
|
|
||
|
|
const containerStyle = computed(() => {
|
||
|
|
const { top, bottom, left, right, transform, ...otherStyles } = customStyle.value || {}
|
||
|
|
|
||
|
|
const baseStyle = {
|
||
|
|
position: 'fixed',
|
||
|
|
zIndex: 9999
|
||
|
|
}
|
||
|
|
|
||
|
|
const horizontalPosition = left || right
|
||
|
|
? { left, right }
|
||
|
|
: { left: '50%', transform: 'translateX(-50%)' }
|
||
|
|
|
||
|
|
const verticalPosition = {}
|
||
|
|
if (bottom !== undefined) {
|
||
|
|
verticalPosition.bottom = bottom
|
||
|
|
} else {
|
||
|
|
verticalPosition.top = top || '50px'
|
||
|
|
}
|
||
|
|
|
||
|
|
return {
|
||
|
|
...baseStyle,
|
||
|
|
...horizontalPosition,
|
||
|
|
...verticalPosition,
|
||
|
|
...otherStyles
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
const emit = defineEmits(['after-leave'])
|
||
|
|
|
||
|
|
const showMessage = (options) => {
|
||
|
|
if (typeof options === 'string') {
|
||
|
|
messageText.value = options
|
||
|
|
title.value = {}
|
||
|
|
subTitle.value = {}
|
||
|
|
} else {
|
||
|
|
messageText.value = options.message || ''
|
||
|
|
title.value = options.title || {}
|
||
|
|
subTitle.value = options.subTitle || {}
|
||
|
|
}
|
||
|
|
|
||
|
|
messageType.value = options.type || 'success'
|
||
|
|
showIcon.value = options.icon !== false
|
||
|
|
customStyle.value = options.style || {}
|
||
|
|
visible.value = true
|
||
|
|
|
||
|
|
setTimeout(() => {
|
||
|
|
visible.value = false
|
||
|
|
}, options.duration || 2000)
|
||
|
|
}
|
||
|
|
|
||
|
|
defineExpose({ showMessage })
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<transition
|
||
|
|
name="fade"
|
||
|
|
@after-leave="$emit('after-leave')"
|
||
|
|
>
|
||
|
|
<MessageContent
|
||
|
|
v-if="visible"
|
||
|
|
:message="messageText"
|
||
|
|
:type="messageType"
|
||
|
|
:title="title"
|
||
|
|
:sub-title="subTitle"
|
||
|
|
:show-icon="showIcon"
|
||
|
|
:style="containerStyle"
|
||
|
|
/>
|
||
|
|
</transition>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.fade-enter-active,
|
||
|
|
.fade-leave-active {
|
||
|
|
transition: opacity 0.2s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
.fade-enter-from,
|
||
|
|
.fade-leave-to {
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
</style>
|