Vue3 简单的实现文字无限滚动

需求：公告通知的需求-公告可以自己垂直无限滚动

效果图

<template>
  <div class="announcement-notice" v-if="true">
    <div class="main-title">
      <img src="../../../../public/images/notice.png" class="title-logo" />
      <span style="font-size: 16px">公告通知：</span>
    </div>
    <div class="loop-div">
      <div
        class="test-block"
        id="test-block"
        :style="{
          transform: `translateY(${-state.scrollValue}px)`,
          transition: state.scrollValue === 0 ? `none 0s` : `all 1.5s ease-in-out`
        }"
        v-for="(item, index) in state.testList"
        @mouseover="mouseOver"
        @mouseout="mouseOut"
        :key="index"
        @click="noticeCLick(item)"
      >
        {{ item }}
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { onMounted, reactive } from 'vue'
  import { useRouter } from 'vue-router'

  const router = useRouter()
  let state = reactive({
    stop: false,
    scrollValue: 0,
    testList: [
      '777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777',
      '6666'
    ]
  })

  const noticeCLick = (item) => {
    console.log(item)
    router.push({
      path: '/system/notice-manage',
      query: {
        id: '666'
      }
    })
  }

  function scrollText() {
    if (!state.stop) {
      if (state.scrollValue >= (state.testList.length - 1) * 30) {
        state.scrollValue = 0
      } else {
        state.scrollValue += 30
      }
      if (state.scrollValue === 0) {
        delayedScrolling(100)
      } else {
        delayedScrolling(3000)
      }
    } else {
      delayedScrolling(3000)
    }
  }
  const delayedScrolling = (timeout = 3000) => {
    setTimeout(() => {
      scrollText()
    }, timeout)
  }
  const mouseOver = () => {
    state.stop = true
  }
  const mouseOut = () => {
    state.stop = false
  }
  onMounted(() => {
    const params = state.testList[0]
    if (state.testList.length > 1) {
      state.testList.push(params)
    }
    delayedScrolling(3000)
  })
</script>

<style lang="less" scoped>
  .announcement-notice {
    display: flex;

    height: 30px;
    line-height: 30px;
    .main-title {
      .title-logo {
        height: 12px;
        margin-bottom: 4px;
        margin-right: 6px;
      }
    }

    .loop-div {
      flex: 1;
      background: #f0f0f0;
      height: 30px;
      overflow: hidden;

      .test-block {
        height: 100%;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
</style>