vue 怎么监听 marquee 是否播放完成

Vue 本身没有提供对 marquee 元素播放完成的监听事件，但可以通过以下方法实现：

1. 使用 MutationObserver API 监听 marquee 元素的属性变化，当其 style 属性的 transform 值为 translateX(-100%) 时表示播放完成。

<marquee ref="marquee">这是一段跑马灯文字</marquee>

mounted() {
  const marquee = this.$refs.marquee;
  const observer = new MutationObserver((mutationsList) => {
    for (const mutation of mutationsList) {
      if (mutation.attributeName === 'style' && mutation.target.style.transform === 'translateX(-100%)') {
        console.log('marquee 播放完成');
      }
    }
  });
  observer.observe(marquee, { attributes: true });
}

2. 使用 setInterval 定时检查 marquee 元素的 scrollLeft 属性，当其值达到一定大小时表示播放完成。

<marquee ref="marquee">这是一段跑马灯文字</marquee>

mounted() {
  const marquee = this.$refs.marquee;
  const intervalId = setInterval(() => {
    if (marquee.scrollLeft >= marquee.scrollWidth - marquee.clientWidth) {
      console.log('marquee 播放完成');
      clearInterval(intervalId);
    }
  }, 100);
}
``