vue 无缝滚动横向公告

以下是一个基于Vue实现的文字横向无缝滚动组件的代码示例：

<template>
  <div class="marquee">
    <div class="marquee-content" ref="marqueeContent">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Marquee',
  data() {
    return {
      timer: null,
      speed: 1,
      isPaused: false
    }
  },
  mounted() {
    this.start()
  },
  methods: {
    start() {
      this.timer = setInterval(() => {
        if (!this.isPaused) {
          const marqueeContent = this.$refs.marqueeContent
          const marqueeWidth = marqueeContent.offsetWidth
          const parentWidth = marqueeContent.parentNode.offsetWidth
          if (marqueeWidth - this.speed <= parentWidth) {
            marqueeContent.style.left = '0px'
          } else {
            marqueeContent.style.left = parseInt(marqueeContent.style.left || '0') - this.speed + 'px'
          }
        }
      }, 20)
    },
    pause() {
      this.isPaused = true
    },
    resume() {
      this.isPaused = false
    }
  },
  beforeDestroy() {
    clearInterval(this.timer)
  }
}
</script>

<style>
.marquee {
  overflow: hidden;
  position: relative;
}

.marquee-content {
  position: absolute;
  white-space: nowrap;
}
</style>

使用方法：

在需要使用滚动公告的地方，引入该组件并使用`<marquee>`标签包裹需要滚动的内容即可，例如：

<template>
  <div>
    <marquee>
      <span>这是第一条公告</span>
      <span>这是第二条公告</span>
      <span>这是第三条公告</span>
    </marquee>
  </div>
</template>

<script>
import Marquee from '@/components/Marquee.vue'

export default {
  name: 'Demo',
  components: {
    Marquee
  }
}
</script>