ni/src/components/message/Message.vue

<script setup lang="ts">
import useNiMessage from './index'
import {useNiConfig} from '~/config'
import { onMounted } from 'vue'
const { message } = useNiMessage()
const config = useNiConfig()
onMounted(() => {
    config.set('messageOnMounted', true)
})
</script>

<template>
    <teleport to="body">
        <TransitionGroup name="niMessage" tag="div" class="NiMessage" data-prefix="Ni">
            <div class="niMessageContent" v-for="msg in message" :key="msg.messageId" @mouseenter="msg.pause"
                @mouseleave="msg.resume">
                <div class="niMessageIcon">
                    <!-- <div v-if="msg.type == 'log'" class="startMessageIconFont messageLog">
                        <NiLogo/>
                    </div> -->
                    <div v-if="msg.type == 'info'" class="startMessageIconFont messageInfo">&#xe871;</div>
                    <div v-else-if="msg.type == 'success'" class="startMessageIconFont messageSuccess">&#xe842;
                    </div>
                    <div v-else-if="msg.type == 'warning'" class="startMessageIconFont messageWarning">&#xe83d;
                    </div>
                    <div v-else-if="msg.type == 'error'" class="startMessageIconFont messageError">&#xe839;</div>
                </div>
                <div class="niMessageBody">
                    {{ msg.content }}
                </div>
            </div>
        </TransitionGroup>
    </teleport>
</template>


<style scoped lang="scss">
@use '@/styles/style.scss' as niStyle;

// 动画
.niMessage-enter-active,
.niMessage-leave-active {
    transition: all .5s ease-in-out;
}

.niMessage-enter-from,
.niMessage-leave-to {
    transform: translateY(-100%);
    opacity: 0;
}

.NiMessage {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    /* 新消息在上方 */
    gap: 10px;
    z-index: 9999;
    pointer-events: none;
    /* 容器不阻挡点击 */
    --Ni-button-info-bg-default: #2080f0;
    --Ni-button-success-bg-default: #18a058;
    --Ni-button-warning-bg-default: #f0a020;
    --Ni-button-error-bg-default: #d03050;
    --Ni-content-padding: 10px;
    --Ni-border-radius: 4px;
}

.niMessageContent {
    position: relative;
    display: flex;
    align-items: center;
    padding: var(--Ni-content-padding);
    transition: all 0.3s;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
    border-radius: var(--Ni-border-radius);
    background: #fefefe;
    cursor: pointer;
    letter-spacing: 1px;
    pointer-events: auto;
    /* 单个消息可交互 */
    max-width: min(1000px, 80vw);

    &>div.niMessageIcon {
        position: relative;
        flex-shrink: 0;
        margin-right: .8rem;

        &>div {
            font-size: 1.6rem;
        }

        &>div.messageLog {
            font-size: 6px;
        }

        &>div.messageInfo {
            color: var(--Ni-button-info-bg-default);
        }

        &>div.messageSuccess {
            color: var(--Ni-button-success-bg-default);
        }

        &>div.messageWarning {
            color: var(--Ni-button-warning-bg-default);
        }

        &>div.messageError {
            color: var(--Ni-button-error-bg-default);
        }
    }

    &>div.niMessageBody {
        position: relative;
        display: flex;
        align-items: center;
        font-size: 1em;
    }
}
</style>