Vue跑马灯marquee组件

Vue跑马灯 (marquee) 组件是一种常见的UI组件，可以用于在页面上展示滚动的文字或图片。以下是一个简单的Vue跑马灯组件示例：

<template>
  <div class="marquee">
    <div class="marquee-content" :style="{transform: 'translateX(' + position + 'px)'}">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      position: 0,
      interval: null
    };
  },
  mounted() {
    this.interval = setInterval(() => {
      const content = this.$el.querySelector('.marquee-content');
      const width = content.offsetWidth;
      const parentWidth = this.$el.offsetWidth;
      if (width > parentWidth) {
        this.position -= 1;
        if (Math.abs(this.position) >= width) {
          this.position = parentWidth;
        }
      }
    }, 20);
  },
  beforeDestroy() {
    clearInterval(this.interval);
  }
};
</script>

<style>
.marquee {
  overflow: hidden;
}

.marquee-content {
  display: inline-block;
  white-space: nowrap;
}
</style>

在上面的示例中，我们定义了一个名为 `marquee` 的组件，它包含一个名为 `marquee-content` 的子组件，用于包裹滚动的内容。我们使用CSS的 `overflow` 属性设置父元素为 `hidden`，以隐藏超出父元素边界的内容。

在 `mounted` 钩子函数中，我们使用 `setInterval` 函数定时更新 `marquee-content` 的 `transform` 属性，以实现滚动效果。我们在 `beforeDestroy` 钩子函数中清除定时器，以避免内存泄漏。

在使用 `marquee` 组件时，我们可以将需要滚动的内容插入到组件中，例如：

<marquee>
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
  <img src="image3.jpg" alt="Image 3">
</marquee>

在上面的示例中，我们插入了三张图片到 `marquee` 组件中。这些图片将在组件中滚动，并且当它们的宽度超出父元素的宽度时，它们将自动滚动。