用vue3写一个公告横向滚动轮播

当然可以！下面是一个用Vue 3编写的公告横向滚动轮播的示例代码：

<template>
  <div class="announcement">
    <div class="announcement-container">
      <ul ref="list" class="announcement-list">
        <li v-for="(item, index) in announcements" :key="index" class="announcement-item">
          {{ item }}
        </li>
      </ul>
    </div>
  </div>
</template>

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

export default {
  name: 'Announcement',
  data() {
    return {
      announcements: [
        '公告1',
        '公告2',
        '公告3',
        '公告4',
        '公告5'
      ],
      interval: null,
      currentIndex: 0,
      scrollWidth: 0
    };
  },
  mounted() {
    onMounted(() => {
      this.scrollWidth = this.$refs.list.scrollWidth;
      this.startScroll();
    });
  },
  methods: {
    startScroll() {
      this.interval = setInterval(() => {
        this.currentIndex++;
        if (this.currentIndex >= this.announcements.length) {
          this.currentIndex = 0;
          this.$refs.list.scrollLeft = 0;
        } else {
          this.$refs.list.scrollLeft += this.scrollWidth;
        }
      }, 3000);
    }
  },
  beforeUnmount() {
    clearInterval(this.interval);
  }
};
</script>

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

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

.announcement-list {
  display: flex;
  list-style-type: none;
  padding: 0;
  margin: 0;
  animation: scroll 20s infinite linear;
}

.announcement-item {
  flex: 0 0 auto;
  white-space: nowrap;
  margin-right: 20px;
}

@keyframes scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}
</style>

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

在组件的`mounted`生命周期钩子中，我们获取了滚动容器的宽度，并调用`startScroll`函数开始滚动。

`startScroll`函数使用`setInterval`定时器来每隔一段时间更新当前公告索引，并通过修改滚动容器的`scrollLeft`属性实现滚动效果。当滚动到最后一个公告时，重新设置索引为0，并将滚动容器的`scrollLeft`重置为0。

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

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