vue 跑马灯

有个需求需要实现跑马灯功能，找了一下，基本都是复制黏贴和js实现。还是自己写个吧
vue项目

 <div class="marquee-wrap">
          <div
            class="marquee"
            ref="marquee"
            :style="{ animationDuration: duration }"
          >
            {{ messageList }}
          </div>
 </div>

export default {
  data() {
    return {
      duration: 0, // 动画速度
      messageList:
        ' 您有11积分将在2020年12月31日 23:59:59 过期，请尽快使用, 您有22积分将在2020年12月31日 23:59:59 过期，请尽快使用, 您有33积分将在2020年12月31日 23:59:59 过期，请尽快使用',
    };
  },
  mounted() {
    this.setHorseRace();
  },
  methods: {
    setHorseRace() {
      const marqueeWidth = this.$refs.marquee.scrollWidth; // 获取文字长度
      var style = document.styleSheets[0];  
      style.insertRule(
        `@keyframes marquee{to{ transform:  translateX(-${marqueeWidth}px);}}`,
        1
      ); // 动态设置左移的距离
      this.duration = marqueeWidth / 30 + 's'; // 设置动画的快慢
    },
  }

.marquee-wrap {
  margin-left: 10px;
  overflow-y: auto;
}

.marquee-wrap::-webkit-scrollbar {
  display: none;
}

.marquee {
  padding-left: 10px;
  text-align: center;
  white-space: nowrap;
  animation-iteration-count: infinite;
  animation-name: marquee;
  animation-timing-function: linear;
}