滚动提示组件

组件

复制代码

<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']

});