vue中的消息滾動欄

        <div class="news">
          <img
            class="homeWarning"
            src="../assets/images/home_warning.png"
            alt=""
          />
          <span class="txt">【嚴重】</span>
          <div class="homeText" ref="scroll_div">
            <div ref="scroll_begin" @click="jumpEventPage">
              暫無嚴重通報
            </div>
            <div ref="scroll_end"></div>
          </div>
        </div>

    //消息欄消息滾動
    ScrollImgLeft() {
      const vm = this;
      var speed = 50; //初始化速度 也就是字體的整體滾動速度
      var MyMar = null; //初始化一個變量爲空 用來存放獲取到的文本內容
      var length = vm.showData.alertList.length;//滾動消息列表的長度
      var scroll_begin = vm.$refs.scroll_begin;
      var scroll_end = vm.$refs.scroll_end;
      var scroll_div = vm.$refs.scroll_div;
      //循環方法
      function Loop(n) {
        scroll_div.scrollLeft = 0;
        return new Promise(res => {
          scroll_begin.innerHTML = `${vm.showData.alertList[n].alertName}                          `;
          setTimeout(() => {
            MyMar = setInterval(() => {
              var left = scroll_div.scrollLeft++;
              if (left == scroll_div.scrollLeft) {
                clearInterval(MyMar);
                setTimeout(() => {
                  res(true);
                }, 1000);
              }
            }, speed);
          }, 2000);
        });
      }
      async function Circle() {
        for (var n = 0; n < length; n++) {
          vm.currentNewsData=vm.showData.alertList[n];
          let result = await Loop(n);
          // console.log(result);
          if (n + 1 == length) {
            Circle();
          }
        }
      }
      Circle();

效果：

可以從右向左進行消息滾動。