滚动提示组件

组件

<script setup lang="ts">
import { InfoCircleFilled } from '@ant-design/icons-vue';
import { ref, computed, onMounted } from 'vue';const props = defineProps<{dataList?: string[];
}>();const list = computed(() =>props.dataList?.length ? props.dataList : ['暂无预警']
);const currentIndex = ref(0);onMounted(() => {setInterval(() => {currentIndex.value = (currentIndex.value + 1) % list.value.length;}, 5000); // 每 5 秒切换一条
});
</script>
<template><div class="tishi-vertical"><div class="icon"><InfoCircleFilled />  </div><sapn class="label"> 预警提醒</sapn><div class="labelL">|</div><div class="scroll-box"><div class="scroll-list"><div class="scroll-item" v-for="(item, index) in list" :key="index">{{ item }}</div><!-- 关键：复制一遍数据以实现循环无缝 --><div class="scroll-item" v-for="(item, index) in list" :key="'copy-' + index">{{ item }}</div></div></div></div>
</template><style scoped lang="less">
.tishi-vertical {margin-left: 25px;display: flex;align-items: center;overflow: hidden;font-size: 14px;.icon {font-size: 20px;color: #faad14;margin-right: 6px;svg {path {fill: white;}}}.labelL {margin-right: 20px;margin-left: 20px;}.label {margin-right: 8px;color: #faad14;font-weight: 600;font-size: 14px;}.scroll-box {height: 26px * 1; // 同时显示1条overflow: hidden;flex: 1;position: relative;.scroll-list {display: flex;flex-direction: column;animation: scroll-up 5s linear infinite; // 控制滚动速度.scroll-item {height: 24px;line-height: 24px;white-space: nowrap;font-weight: 400;}}}@keyframes scroll-up {0% {transform: translateY(0%);}100% {transform: translateY(-50%); // 滚动一半，前提是数据重复一遍}}
}</style>

引入

  <!-- 提示 --><WarningNotice :dataList="DATANAMELIST" />

传入数据格式

import { ref, onMounted } from 'vue';

const DATANAMELIST = ref<string[]>([]);

onMounted(() => {

 DATANAMELIST.value=  ['内容1','内容2','内容3']

});