vue 实现多个滚动公告 鼠标移出停止滚动

好的，根据你的要求，我给你提供一个简单的代码示例：

<template>
  <div class="notice-wrapper">
    <div class="notice-content" v-for="(notice, index) in notices" :key="index" ref="notice">
      <span>{{ notice }}</span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      notices: ['公告1', '公告2', '公告3'], // 公告列表
      intervalId: null, // 定时器ID
    };
  },
  mounted() {
    this.startScroll(); // 组件挂载时开始滚动
  },
  methods: {
    // 开始滚动
    startScroll() {
      this.intervalId = setInterval(() => {
        const firstNotice = this.$refs.notice[0];
        const height = firstNotice.offsetHeight;
        this.$refs.notice[0].style.marginTop = `-${height}px`;
        this.notices.push(this.notices.shift());
      }, 2000);
    },
    // 停止滚动
    stopScroll() {
      clearInterval(this.intervalId);
    },
  },
  // 监听鼠标进入和离开事件
  created() {
    this.$parent.$on('mouse-enter', this.stopScroll);
    this.$parent.$on('mouse-leave', this.startScroll);
  },
  // 解绑事件
  beforeDestroy() {
    this.$parent.$off('mouse-enter', this.stopScroll);
    this.$parent.$off('mouse-leave', this.startScroll);
  },
};
</script>

<style>
.notice-wrapper {
  height: 50px;
  overflow: hidden;
}

.notice-content {
  line-height: 50px;
  height: 50px;
  transition: margin-top 0.5s linear;
}
</style>

在这个示例中，我们使用v-for指令遍历公告列表，使用CSS实现滚动效果。在组件挂载时，调用startScroll方法开始滚动，使用setInterval实现定时滚动。在鼠标进入和离开事件中，分别调用stopScroll和startScroll方法，实现鼠标移出停止滚动的效果。注意，在监听事件和解绑事件时，我们使用了$parent来访问父组件，因为鼠标事件是在父组件中触发的。

希望这个示例可以帮到你，如果还有什么不明白的地方，可以继续问我哦~