Vue implementiert horizontales Scrollen von Text im Laufschriftstil

<Vorlage>
<!-- Laufschriftkomponente -->
  <div Klasse="Marquee-Wrap" ref="Marquee-Wrap">
    <div Klasse="scrollen" ref="scrollen">
      <p class="marquee">{{text}}</p>
      <p class="kopieren" ref="kopieren"></p>
    </div>
    <p class="getWidth" ref="getWidth">{{text}}</p>
  </div>
</Vorlage>

<Skript>
Standard exportieren {
  Name: 'Festzelt',
  Requisiten: ['val'],
  Daten () {
    zurückkehren {
      Timer: null,
      text: ''
    }
  },
  erstellt () {
    let timer = setTimeout(() => {
      dies.verschieben()
      Zeitüberschreitung löschen(Timer)
    }, 1000)
  },
  montiert () {
    für (let item of this.val) {
    dieser.text += Artikel
    }
  },
  Methoden: {
    bewegen () {
    let maxWidth = this.$refs['marquee-wrap'].clientWidth
    lass Breite = dies.$refs['getWidth'].scrollWidth
      wenn (Breite <= max.Breite) return
    lass scrollen = dies.$refs['scroll']
    let copy = this.$refs['Kopie']
      kopiere.innerText = dieser.text
      sei Abstand = 0 
      dieser.timer = setzeInterval(() => {
        Abstand -= 1
        if (-Abstand >= Breite) {
          Abstand = 16
        }
        scroll.style.transform = 'translateX(' + Abstand + 'px)'
      }, 20)
    }
  },
  vorZerstören () {
    Intervall löschen(dieser.Timer)
  }
}
</Skript>

<Stilbereich>
  .marquee-wrap {
    Breite: 100 %;
    Überlauf: versteckt;
    Position: relativ;
  }
  .Festzelt{
    Rand rechts: 0,16rem;
  }
  P {
    Worttrennung: alles behalten;
    Leerzeichen: Nowrap;
    Schriftgröße: 0,28rem;
  }
  .scroll {
    Anzeige: Flex;
  }
  .getWidth {
    Worttrennung: alles behalten;
    Leerzeichen:nowrap;
    Position: absolut;
    Deckkraft: 0;
    oben: 0;
  }
</Stil>

// Importieren Sie die Laufschriftkomponenteimport marquee from "@/components/marquee/marquee.vue";

Standard exportieren {
  Komponenten:
  //Registriere die Marquee-Komponente,
  },
 }

<Marquee-Klasse="realData">
          <ul Klasse="fa-scroll-cont">
            <li v-for="Artikel in realen Daten" :key="Artikelname">
              <span class="roll-text">{{ Artikel.Stadt }}</span>
            </li>
          </ul>
</Festzelt>