用vue写一个公告文字左右循环滚动

当然可以！下面是一个使用Vue编写的公告文字左右循环滚动的示例代码：

<template>
  <div class="announcement">
    <div class="announcement-container">
      <div ref="wrapper" class="announcement-wrapper">
        <div ref="content" class="announcement-content">
          {{ currentAnnouncement }}
        </div>
        <div ref="cloneContent" class="announcement-content">
          {{ currentAnnouncement }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, onMounted, watch } from 'vue';

export default {
  name: 'Announcement',
  data() {
    return {
      announcements: [
        '公告1',
        '公告2',
        '公告3',
        '公告4',
        '公告5'
      ],
      currentIndex: 0,
      wrapperWidth: 0,
      contentWidth: 0,
      cloneContentWidth: 0,
      animationId: null
    };
  },
  mounted() {
    onMounted(() => {
      this.calculateWidths();
      this.startAnimation();
    });
  },
  methods: {
    calculateWidths() {
      this.wrapperWidth = this.$refs.wrapper.offsetWidth;
      this.contentWidth = this.$refs.content.offsetWidth;
      this.cloneContentWidth = this.$refs.cloneContent.offsetWidth;
    },
    startAnimation() {
      const wrapper = this.$refs.wrapper;
      const content = this.$refs.content;
      const cloneContent = this.$refs.cloneContent;

      const animate = () => {
        if (content.offsetWidth <= wrapper.scrollLeft) {
          wrapper.scrollLeft -= content.offsetWidth;
        } else {
          wrapper.scrollLeft++;
        }
        this.animationId = requestAnimationFrame(animate);
      };

      this.animationId = requestAnimationFrame(animate);
    }
  },
  beforeUnmount() {
    cancelAnimationFrame(this.animationId);
  },
  computed: {
    currentAnnouncement() {
      return this.announcements[this.currentIndex];
    }
  }
};
</script>

<style scoped>
.announcement {
  width: 100%;
  overflow: hidden;
}

.announcement-container {
  width: 100%;
  overflow: hidden;
}

.announcement-wrapper {
  display: flex;
  overflow: hidden;
}

.announcement-content {
  white-space: nowrap;
  margin-right: 20px;
}

</style>

在这个示例中，我们使用Vue的`ref`和`onMounted`函数来处理滚动逻辑。`announcements`数组中存储了公告内容，`currentIndex`表示当前显示的公告索引，`wrapperWidth`、`contentWidth`和`cloneContentWidth`存储了容器和内容的宽度。

在组件的`mounted`生命周期钩子中，我们计算了容器和内容的宽度，并调用`startAnimation`函数开始滚动。

`startAnimation`函数使用`requestAnimationFrame`递归调用来实现滚动效果。我们通过修改容器的`scrollLeft`属性来实现横向滚动。当滚动到内容末尾时，我们将容器的`scrollLeft`重置为0，实现循环滚动。

最后，在组件的`beforeUnmount`生命周期钩子中清除了动画帧，防止内存泄漏。

你可以根据需要自定义样式和公告内容。希望这个示例对你有帮助！