xl-mobile/src/components/XNoticeBar.vue

<script setup>
import {nextTick, ref, watch} from "vue";
import warn from '../static/icons/warn.png';
import success from '../static/icons/info.png';

const STATUS = {
    error: {
        bg: 'x-notice-box-error',
        context: 'context-error'
    },
    success: {
        bg: 'x-notice-box-success',
        context: 'context-success'
    },
};

const {text, status, tile, textColor} = defineProps({
    text: {
        type: Array,
        default: ['1.你好你好', '2.啊我就会发回复哈', '3.测试啊u发哈u发货']
    },
    textColor: {
        type: String,
        default: '#000'
    },
    status: {
        type: String,
        default: 'error'
    },
    tile: {
        type: Boolean,
        default: false,
    }
});
const showIndex = ref(0);

const XNoticeBox = ref();
const Context = ref();
const roll = ref(false);

watch(
    () => showIndex.value,
    () => {
        if (!tile) {
            nextTick(() => {
                if (
                    Context.value.$el.clientWidth
                    >
                    XNoticeBox.value.$el.clientWidth
                ) {
                    roll.value = true;
                } else {
                    roll.value = false;
                }
            })
        }
    },
    {deep: true}
)

const changeCur = ({detail: {current}}) => {
    if (
        Context.value[current].$el.clientWidth
        >
        XNoticeBox.value[current].$el.clientWidth
    ) {
        setTimeout(() => {
            roll.value = true;
        }, 500);
    } else {
        roll.value = false;
    }
}
</script>

<template>
    <swiper style="height: 80rpx;" autoplay vertical @change="changeCur">
        <swiper-item v-for="v in text">
            <view ref="XNoticeBox" :class="['x-notice-box', STATUS[status].bg]">
                <view ref="Context" :class="['context', roll ? 'roll' : '', STATUS[status].context]"
                      :style="{alignItems: tile ? 'start' : 'center'}">
                    <image v-if="status==='error'" class="!size-[26rpx] flex-shrink-0" :src="warn"></image>
                    <image v-else class="!size-[26rpx] flex-shrink-0" :src="success"></image>
                    <view v-if="!tile">
                        <view
                            class="!whitespace-nowrap flex-shrink-0"
                            :style="{color: textColor}"
                            v-html="v">
                        </view>
                    </view>
                    <text v-else :style="{color: textColor}" v-html="text">
                    </text>
                </view>
            </view>
        </swiper-item>
    </swiper>
</template>

<style scoped lang="scss">
.x-notice-box-error {
    background-color: #FFF7E8;
}

.x-notice-box-success {
    background-color: #E8F3FF;
}

.context-error {
    color: rgb(255, 87, 34);
}

.context-success {
    color: rgb(29, 33, 41);
}

.x-notice-box {
    padding: 18rpx 24rpx;
    width: 100%;
    overflow: hidden;
}

.context {
    font-size: 24rpx;
    font-weight: 400;
    line-height: 22px;
    letter-spacing: 0;
    text-align: left;
    white-space: nowrap;
    display: inline-flex;
    gap: 18rpx;
}

.roll {
    animation: 10s Roll linear infinite forwards;
}

@keyframes Roll {
    0% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(-100%);
    }
}
</style>