滚动提示组件

组件

复制代码
<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']

});

相关推荐
code_YuJun几秒前
管理系统——应用初始化 Loading 动画
前端
oak隔壁找我2 分钟前
JavaScript 模块化演进历程:问题与解决方案。
前端·javascript·架构
Elieal15 分钟前
AJAX 知识
前端·ajax·okhttp
九皇叔叔26 分钟前
Java循环结构全解析:从基础用法到性能优化
java·开发语言·性能优化
流星52112234 分钟前
GC 如何判断对象该回收?从可达性分析到回收时机的关键逻辑
java·jvm·笔记·学习·算法
csdn_aspnet34 分钟前
Java 圆台体积和表面积计算程序(Program for Volume and Surface area of Frustum of Cone)
java
sulikey35 分钟前
Qt 入门简洁笔记:从框架概念到开发环境搭建
开发语言·前端·c++·qt·前端框架·visual studio·qt框架
杯莫停丶40 分钟前
设计模式之:外观模式
java·设计模式·外观模式
乐之者v42 分钟前
Mac常用软件
java·1024程序员节
TDengine (老段)1 小时前
TDengine 数据函数 ROUND 用户手册
java·大数据·数据库·物联网·时序数据库·tdengine·1024程序员节