aec3825a3b
- 重构 x-message 组件，支持更多自定义选项 - 添加 artDetail 页面用于展示艺术品详情 - 修改 liveRoom 页面，接入新的消息提示功能- 优化 profile 页面布局，增加去支付按钮 - 调整 home 页面，集成新的消息系统 - 修改 websocket 插件，支持携带 token 认证
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>
|