滚动提示组件

组件

import { InfoCircleFilled } from \'@ant-design/icons-vue\';import { ref, computed, onMounted } from \'vue\';const props = defineProps();const list = computed(() => props.dataList?.length ? props.dataList : [\'暂无预警\']);const currentIndex = ref(0);onMounted(() => { setInterval(() => { currentIndex.value = (currentIndex.value + 1) % list.value.length; }, 5000); // 每 5 秒切换一条}); 
 
 
  预警提醒 
|
 
 
 
 {{ item }} 
  
 {{ item }} 
 
 
 
.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%); // 滚动一半，前提是数据重复一遍 } }}

引入

传入数据格式

import { ref, onMounted } from \'vue\';

const DATANAMELIST = ref([]);

onMounted(() => {

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

});